试图在 [vue.js 3] 中创建一个原型来全局访问我的 Api (Axios)，但我总是收到此错误：“无法读取未定义的属性”

Posted 2023-02-22

【中文标题】试图在 [vue.js 3] 中创建一个原型来全局访问我的 Api (Axios)，但我总是收到此错误：“无法读取未定义的属性”

【英文标题】：trying to create a prototype to access my Api (Axios) globally in [vue.js 3] and I always get this error: "Cannot read properties of undefined"

【发布时间】：2021-11-10 05:56:14

【问题描述】：

错误：Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'get')

主要文件

axios 文件

import axios from "axios";

const token = "eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOJQ......";

export default axios.create(
  baseURL: "https://api.themoviedb.org/3",
  headers: 
    authorization: `Bearer $token`,
  ,
);

ma​​in.js 文件

import api from "@/data/db";

const app = createApp();
app.config.globalProperties.$http = api;

主文件

async mounted() 
    const response = await this.$http.get("/movie/550");
    console.log(response);
,

【问题讨论】：

您导入的api 是什么？ (import api from "@/data/db";) 它是 axios 的包装器吗？

是的，它是“围绕 axios 的包装器”

可以分享一下这个文件的代码吗？ axios 实例真的返回了吗？

我一开始就提到了：import axios from "axios"; const token = "eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI5YWI0NWI0ZjRkNTc3Y2Q4N2EzZjM2YzhmNmVk......"; export default axios.create( baseURL: "https://api.themoviedb.org/3", headers: authorization: Bearer $token, , );

这能回答你的问题吗？ use axios globally in all my components vue

【参考方案1】：

查看this sandbox。它在控制台中记录一个承诺，不会给出未定义的错误。尝试将您的实际密钥放入 db.js 文件并检查您是否可以向 API 发出请求。

我认为您代码中的问题在于const app = createApp();这一行

您需要将一个带有mounted() 钩子的组件作为对象参数传递给createApp 函数。然后你需要mount这个应用程序。

import api from "@/data/db";
import Home from "@/Home.vue";
const app = createApp(Home);
app.config.globalProperties.$http = api;
app.mount("#app"); // Provide a valid html id that exists in your index.html file

【讨论】：

我试过了，但我在主页组件中遇到了同样的错误，特别是在挂载中。

这就是：未捕获（在承诺中）类型错误：无法读取未定义的属性（读取'get'）

你看看我做的沙盒了吗？我无法重现您的问题。您能否分叉沙箱并对其进行更改以给我们minimal, reproducible example？