[英]How to use 2 instances of Axios with different baseURL in the same app (vue.js)
我正在尝试学习 vue.js,所以我制作了一个小应用程序,它显示来自 API 的新闻文章,并在另一个视图中允许用户登录到另一个服务器。
为此,我正在使用 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? 为什么它昨天起作用了……我很困惑。
您需要为每个具有不同baseURL
的 API创建一个具有自定义配置的新 Axios 实例。
var instance = axios.create({
baseURL: 'https://example.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
您可以简单地使用多个 Axios 实例,每个实例都有自己的配置。 例如,
import axios from "axios";
// For common config
axios.defaults.headers.post["Content-Type"] = "application/json";
const mainAxios = axios.create({
baseURL: 'https://some-domain.example/api/'
});
const customAxios = axios.create({
baseURL: 'https://some-custom-domain.example/api/'
});
export {
mainAxios,
customAxios
};
是的,为了清楚起见:
let config = {baseURL: 'https://some-domain.example/api/',
timeout: 1000,
headers: {
'X-Custom-Header': 'foobar',
'Authorization' : `Bearer ${auth.token}` //where applicable
}
};
let instance = axios.create(config);
此外,您可以指定将应用于每个请求的配置默认值。
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-
urlencoded';
我有同样的问题,为了解决它,我创建了一个接口和一个函数(TS 中的示例):
export function createClient(baseURL: string) {
return axios.create({
baseURL: baseURL,
headers: { "Content-Type": "application/json" }
});
}
export interface ConfigurableApi {
configure(config: Configuration);
}
对于每个客户,我创建了一个类
@Singleton()
export class ApiOfClientA implements ConfigurableApi {
client!: AxiosInstance;
configure(config: Configuration) {
this.client = createClient(config.baseURL);
}
...
}
如果您想使用 JS,您可能可以执行以下操作:
import axios from "axios";
let clientA;
const ClientA = {
init(baseURL) {
clientA = axios.create({
baseURL: `${baseURL}`,
headers: {"Content-Type": "application/json"}
});
},
...
};
export {ClientA};
然后只需将其导入您需要使用它的文件中:
import {ClientA} from "./api/client-a";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.