如何在同一个应用程序中使用具有不同baseURL的2个Axios实例（vue.js） [英] How to use 2 instances of Axios with different baseURL in the same app (vue.js)

问题描述

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

I'm trying to learn vue.js so I made a little app that displays news articles from an API and, in another view, allows the user to log into another server.

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

For this I'm using Axios. I know I got it to work pretty well at some point, but today when starting my project, it's just impossible to get both apis to work simultaneously.

这是我的登录服务：

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 ...

Both those services are in different JS files and are imported in different vue files but it seems that now they cannot coexist and there is always one overwriting the baseURL of the other (not always the same) almost like if the Axios instance was the same in both cases. So some time the first service uses the second one's baseURL, sometimes it's the second that uses the first one's baseURL...

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

I don't know exactly the scope of 'import' because it's pretty new to me but both instances are in different files, have different names so I don't really understand how they get mixed up. Except if 'import' always calls the same instance of a module but then how do I work with 2 apis? And why did it work yesterday... I'm confused.

推荐答案

你想要使用自定义配置创建一个新的axios实例，每个API都有一个不同的 baseURL 。

You'll want to create a new instance of axios with a custom config for each API you want that has a distinct baseURL.

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

这篇关于如何在同一个应用程序中使用具有不同baseURL的2个Axios实例（vue.js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！