如何在同一个应用程序（vue.js）中使用两个具有不同baseURL的Axios实例

Question

我正在努力学习vue。因此，我制作了一个小应用程序，可以显示来自API的新闻文章，并在另一个视图中允许用户登录到另一台服务器。

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

这是我的登录服务：

import axiosTrainingAPI from 'axios'

axiosTrainingAPI.defaults.baseURL = 'https://api.**********.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。。。

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

Answer 1

是的，为了清楚起见：

let config = {baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {
   'X-Custom-Header': 'foobar',
    'Authorization' : `Bearer ${auth.token}` //where applicable
  }
};
let instance = axios.create(config);

此外，您还可以指定将应用于每个请求的配置默认值。

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form- 
urlencoded';```

Answer 2

您可以简单地使用axios的多个实例，每个实例都有自己的配置。例如，

import axios from "axios";
    
// For common config
axios.defaults.headers.post["Content-Type"] = "application/json";
    
const mainAxios = axios.create({
    baseURL: 'https://some-domain.com/api/'
});
    
const customAxios = axios.create({
    baseURL: 'https://some-custom-domain.com/api/'
});
    
    
export {
  mainAxios,
  customAxios
};

Answer 3

您需要为每个API创建一个新的axios实例，该API具有不同的baseURL。

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