如何在同一个应用程序中使用具有不同 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...

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

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屋！