axios は複数のインターフェイス リクエストを構成します (3) - vue プロジェクト axios は複数の IP アドレスを構成し、複数のインターフェイス リクエストを構成します
Vue プロジェクトで複数の IP アドレスを構成し、各 IP アドレスに対して複数のインターフェイス リクエストを構成します。次のように構成できます。
apiConfig.js
1. 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.js などの API ファイルを作成して、インターフェイス要求の定義と構成を保存します。
// 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
および で作成された Axios インスタンスを通じてinstance2
、さまざまな IP アドレスのリクエストを行うことができます。
requestEndpoint1()
および の形式を通じてrequestEndpoint2()
、対応するインターフェイス要求関数を呼び出し、対応する IP アドレスとインターフェイス エンドポイントへの要求を開始できます。
このようにして、Vue プロジェクトで複数の IP アドレスを構成し、各 IP アドレスに対して複数のインターフェイス リクエストを構成できます。実際のニーズに基づいて、構成ファイルに IP アドレスとインターフェイスのリクエスト構成を追加し、コンポーネントでそれらを使用して必要に応じてリクエストを行うことができます。