全局 API 调用 Vue.js答案

【问题标题】：Global API call Vue.js全局 API 调用 Vue.js
【发布时间】：2020-06-01 14:50:58
【问题描述】：

我在创建包含 API 的全局变量时遇到问题。我需要在我的整个应用程序中使用这个变量，所以到时候更改 API 链接会更容易。我怎样才能做到这一点？到目前为止，我已经完成了以下工作：

创建了一个名为 config.js 的文件

const baseURL = 'http://myapi'

export default {
    baseURL
}

我正在使用 Vuex 进行 api 调用，因此我尝试接收数据的部分在我的商店中如下所示：

import baseURL from '../../../config.js'

    async fetchStaff({ commit }, id, baseURL) {
    if (id === undefined) {
        const response = await axios.get(baseURL + `/employee/staff`, { headers: { Authorization: `Bearer ${sessionStorage.getItem('token')}` } });
        commit('setStaff', response.data);
        // eslint-disable-next-line no-console
        console.log(response.data)
    } else {
        const response = await axios.get(baseURL + `/employee/${id}`, { headers: { Authorization: `Bearer ${sessionStorage.getItem('token')}` } });
        commit('setStaff', response.data);
    }
},

baseURL 在存储中未定义。有人可以指出这里的错误吗？

【问题讨论】：

您正在导出一个默认对象并导入该对象，并在此过程中对其进行命名。您要么想要import { baseURL } from ...，要么将其引用为baseURL.baseURL，可能是前者。

标签： javascript api vue.js axios

【解决方案1】：

config.js

// Bases
export const baseURL = 'http://myapi'

// Endpoints
export const api_1 = '/api1'
export const api_2 = param1 => `/api2/ + ${param1}`

store.js

// import apis you want to use this file.
import { baseURL, api_1 } from '../../../config.js'

【讨论】：

目的是解释为什么它不起作用，然后提供答案。

【解决方案2】：

首先，您要在 config.js 中导出一个对象。所以如果你像下面这样导入它：

import baseURL from '../../../config.js'

然后您将获得配置的整个对象。相反，您可以通过以下方式导入 baseURL 变量：

import { baseURL } from '../../../config.js'

其次，在这一行：

async fetchStaff({ commit }, id, baseURL)

baseURL 被识别为参数。这就是为什么它总是没有价值或undefined，我建议将它从函数参数中删除。所以它可能如下所示：

import { baseURL } from '../../../config.js'


async fetchStaff({ commit }, id) {
    if (id === undefined) {
        const response = await axios.get(baseURL + `/employee/staff`, { headers: { Authorization: `Bearer ${sessionStorage.getItem('token')}` } });
        commit('setStaff', response.data);
        // eslint-disable-next-line no-console
        console.log(response.data)
    } else {
        const response = await axios.get(baseURL + `/employee/${id}`, { headers: { Authorization: `Bearer ${sessionStorage.getItem('token')}` } });
        commit('setStaff', response.data);
    }
},

谢谢

【讨论】：