axiosリクエストをvueでカプセル化する方法

エクスポートデフォルト{
// 開発環境 dev: {
    baseUrl: 「開発環境のパブリック アドレス」
},
// テスト環境テスト
テスト： {
    baseUrl: "テスト環境のパブリック アドレス"
},
//オンラインインターフェース製品: {
    baseUrl: 「オンライン環境のパブリックアドレス」
}
};

「axios」からaxiosをインポートします。
「./env」からenvをインポートします。
// これはプライベートドメイン名ですが、空白のままにすることもできます var vipUrl = "/app";
// axiosインスタンスを作成する const service = axios.create({
//オンラインインターフェーステストのベースUrlは次のとおりです: env.prod.baseUrl + vipUrl、
    headers:{},//リクエスト ヘッダー settimeout:2000,//タイムアウト });
//リクエストインターセプターを追加する service.interceptors.request.use(
設定 => {
    // リクエストを送信する前に何かを実行します config.headers["deviceType"] = "H5";
    console.log("要求されたデータ:", config);
    設定を返します。
},
エラー => {
    // リクエストエラーに対して何らかの処理を実行します。 return Promise.reject("error", error);
}
);

//レスポンスインターセプターを追加する service.interceptors.response.use(
レスポンス => {
    // 応答データを使用して何かを実行します // console.log("返されたデータ", response);
    応答を返します。
},
エラー => {
    // エラーに対して何らかの処理を実行します。 return Promise.reject(error);
}
);
デフォルト サービスをエクスポートします。

// request.js ファイルをインポートしますimport request from "./request";

// カルーセルエクスポート関数 getBanners(data) {
リクエストを返す({
    url: "/banner", //このアドレスは、パブリック アドレスとプライベート ドメイン名を削除した後に残ったアドレスです。 method: "GET", //リクエスト メソッドは、get、post、put、delete などの複数のメソッドをサポートします。 data//リクエストの送信時に設定されるパラメーター。パラメーターがない場合は、空白のままにすることもできます。 });
}

<スクリプト>
// 必要なインターフェースを導入します import { getBanners } from "../http/api";
エクスポートデフォルト{
名前: "ホーム",
コンポーネント: {},
マウント() {
    //直接使用します。 then は成功したリクエストのコールバックです。 catch は失敗したリクエストのコールバックです getBanners()
    .then(結果 => {
        window.console.log("111", 結果);
    })
    .catch(エラー => {
        window.console.log("222", エラー);
    });
},
メソッド: {}
};
</スクリプト>