vue - axios 调用不起作用（无法读取未定义的属性“协议”）答案

【问题标题】：vue - axios call not working(Cannot read property 'protocol' of undefined)vue - axios 调用不起作用（无法读取未定义的属性“协议”）
【发布时间】：2021-07-10 12:11:04
【问题描述】：

我是 Vue.js 的初学者。

我正在尝试对我的 /src/component/data.js 进行 axios 调用

文件如下所示：

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"
    }
  ]

代码沙盒：
https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/components/HelloWorld.vue:1790-2040

不修改data.js如何解决？

【问题讨论】：

标签： javascript vue.js axios

【解决方案1】：

您的代码中有错字。您正在导出

export { myData };

但是，导入

import { mydata } from "./data";

但是在没有来自 axios 的端点的情况下询问数据仍然没有意义

【讨论】：

如果不想修改data.js，如何获取HelloWorld.vue中的数据
我不是要求你修改 data.js 我是告诉你更正你在 HelloWorld.vue 中的导入语句，它会修复错误但不会完成你想要做的事情。您可以使用简单的数据导出而不是使用 Axios。或者应该使用某种 Axios moke API

【解决方案2】：

简而言之，Axios 是一个 Javascript 库，用于从 node.js 发出 HTTP 请求或从浏览器发出 XMLHttpRequests，它也支持 ES6 Promise API。所以你应该有你的后端 API 的 URL 来调用 axios 并从那里获取数据，在你的代码 Pconst myData = () => { return new Promise((resolve, reject) => { resolve(data()); }); }; data 函数仅代表没有任何服务器请求的数组，在您的情况下只需删除 axios.get 。最好的问候

【讨论】：

如果不想修改data.js，如何获取HelloWorld.vue中的数据
代替 axios.get(mydata) 写入 mydata
但这是承诺
我尝试将其更改为const response = mydata;，它在控制台中显示未定义
const response = await mydata;