javascript - 如何在同一个应用程序中使用 2 个具有不同 baseURL 的 Axios 实例 (vue.js)

Question

我正在尝试学习 vue.js，所以我制作了一个小应用程序来显示来自 API 的新闻文章，并在另一个 View 中允许用户登录到另一个服务器。

为此，我使用 Axios。我知道我在某些时候让它工作得很好，但今天开始我的项目时，让两个 api 同时工作是不可能的。

这是我的登录服务:

import axiosTrainingAPI from 'axios'

axiosTrainingAPI.defaults.baseURL = 'https://api.example.com'

const trainingAPI = {
  login (credentials) {
    return new Promise((resolve, reject) => {
      axiosTrainingAPI.post('/services/auth.php', credentials)
        .then(response => {
          resolve(response.data)
        }).catch(response => {
          reject(response.status)
        })
    })
  }
}

export default trainingAPI

这是我的新闻服务:

import axiosGoogleNewsAPI from 'axios'

axiosGoogleNewsAPI.defaults.baseURL = 'https://newsapi.org'

const googleNewsAPI = {
  getPosts (newsId) {
    return new Promise((resolve, reject) => {
      axiosGoogleNewsAPI.get(`/v2/everything?q=${newsId}&sortBy=publishedAt&apiKey=***********`)
        .then(response => {
          resolve(response.data)
        }).catch(response => {
          reject(response.status)
        })
    })
  }
}

export default googleNewsAPI

这两个服务都在不同的 JS 文件中，并在不同的 vue 文件中导入，但现在它们似乎不能共存，并且总是有一个覆盖另一个的 baseURL(不总是相同的)几乎就像 Axios 实例一样两种情况都一样。所以有时第一个服务使用第二个服务的 baseURL，有时是第二个服务使用第一个服务的 baseURL...

我不确切知道“导入”的范围，因为它对我来说很新，但两个实例都在不同的文件中，具有不同的名称，所以我真的不明白它们是如何混淆的。除非“导入”总是调用模块的同一个实例，否则我该如何使用 2 个 api？为什么它在昨天起作用了……我很困惑。

Answer 1

你会想 create a new instance of Axios为您想要的每个 API 使用自定义配置，该配置具有不同的 baseURL。

var instance = axios.create({
  baseURL: 'https://example.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});