axios配置多个接口请求(三)——vue项目axios配置多个IP地址,并配置多个接口请求
在 Vue 项目中配置多个 IP 地址,并针对每个 IP 地址配置多个接口请求,你可以按照以下方式进行配置:
1、创建一个配置文件,例如 apiConfig.js
,用于存放 IP 地址和接口请求的配置信息。
// apiConfig.js
export const API_BASE_URL_1 = 'http://ip1.example.com';
export const API_BASE_URL_2 = 'http://ip2.example.com';
export const API_ENDPOINTS = {
endpoint1: '/api/endpoint1',
endpoint2: '/api/endpoint2',
// 添加其他接口请求的配置...
};
2、创建一个 API 文件,例如 api.js,用于存放接口请求的定义和配置。
// api.js
import axios from 'axios';
import { API_BASE_URL_1, API_BASE_URL_2, API_ENDPOINTS } from '@/apiConfig';
// 创建一个 Axios 实例
const instance1 = axios.create({
baseURL: API_BASE_URL_1,
});
const instance2 = axios.create({
baseURL: API_BASE_URL_2,
});
// 定义接口请求函数
export function requestEndpoint1() {
return instance1.get(API_ENDPOINTS.endpoint1);
}
export function requestEndpoint2() {
return instance2.get(API_ENDPOINTS.endpoint2);
}
// 添加其他接口请求函数...
3、在需要发起请求的组件中,导入并调用相应的接口请求函数。
// YourComponent.vue
import { requestEndpoint1, requestEndpoint2 } from '@/api';
export default {
methods: {
async fetchData() {
try {
const response1 = await requestEndpoint1();
console.log(response1.data);
const response2 = await requestEndpoint2();
console.log(response2.data);
// 发起其他请求...
} catch (error) {
console.error(error);
}
},
},
};
在上述示例中,通过导入 IP 地址和接口请求的配置信息,你可以在需要发起请求的地方使用这些配置来构建请求的完整 URL。通过 instance1
和 instance2
创建的 Axios 实例,你可以针对不同的 IP 地址进行请求。
通过 requestEndpoint1()
和 requestEndpoint2()
的形式,你可以调用相应的接口请求函数,并发起请求到对应的 IP 地址和接口端点。
这样,你就可以在 Vue 项目中配置多个 IP 地址,并针对每个 IP 地址配置多个接口请求。根据实际需求,你可以在配置文件中添加更多的 IP 地址和接口请求配置,并在组件中根据需要使用它们进行请求。