Блог

Главная - Вопросы по программированию - вызов vue — axios не работает(не удается прочитать свойство «протокол» неопределенного)

вызов vue — axios не работает(не удается прочитать свойство «протокол» неопределенного)

#javascript #vue.js #axios

Вопрос:

Я новичок в Vue.js.

Я пытаюсь выполнить вызов axios на своем /src/component/data.js

Файл выглядит следующим образом:

 const myData = () => {
  return new Promise((resolve, reject) => {
    resolve(data());
  });
};

const data = () => {
  return [
    {
      name: "A"
    },
    {
      name: "B"
    }
  ];
};

export { myData };

Когда я пытаюсь получить доступ к данным на HelloWorld.vue :

 <script>
import axios from "axios";
import { mydata } from "./data";

export default {
...
  async mounted() {
    const response = await axios.get(mydata);
    console.log(response);
  }
};
</script>

Ошибка показывает

 TypeError: Cannot read property 'protocol' of undefined

Результат, которого я хочу, это

 [
    {
      name: "A"
    },
    {
      name: "B"
    }
  ]

CodeSandbox:
https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/components/HelloWorld.vue:1790-2040

Как решить ее, не изменяя data.js ?

Ответ №1:

в вашем коде есть опечатка. вы экспортируете

 export { myData };

но, импортируя

 import { mydata } from "./data";

но все равно не имеет смысла запрашивать данные без конечной точки у axios

Комментарии:

1. Если я не хочу изменять data.js, как я могу получить данные в HelloWorld.vue

2. я не прошу вас изменять data.js Я говорю вам исправить ваше заявление об импорте в HelloWorld.vue, и это исправит ошибку, но не выполнит то, что вы пытаетесь сделать. вы можете использовать простой экспорт данных вместо использования Axios. или следует использовать какой-то API Axios moke

Ответ №2:

В двух словах, Axios-это библиотека Javascript, используемая для выполнения HTTP-запросов от node.js или XMLHttpRequests из браузера, который также поддерживает API ES6 Promise. Таким образом , у вас должен быть URL-адрес вашего внутреннего API для вызова axios и получения данных оттуда, в вашем коде Pconst myData = () => {
return new Promise((resolve, reject) => {
resolve(data());
});
}; функция данных представляет собой просто массив без какого-либо запроса сервера, в вашем случае просто удалите axios.get . С уважением

Комментарии:

1. Если я не хочу изменять data.js, как я могу получить данные в HelloWorld.vue

2. вместо axios.get(mydata) напишите mydata

3. Но это обещание

4. Я попытался изменить его на const response = mydata; , он отображается неопределенным в консоли

5. постоянный ответ = ожидание моих данных;

Метки: