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

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

実際、Vueでaxiosをカプセル化するのは非常に簡単です

まず、srcパスにhttpフォルダを作成し、api.js、env.js、request.jsの3つのファイルを作成します。

env.js ファイル

このファイルは主に私たちのパブリックアドレスをカプセル化します

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

request.js ファイル

ここでの主な目的は、axiosを作成し、リクエストインターセプションと対応するインターセプションをカプセル化することです。

「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);
}
);
デフォルト サービスをエクスポートします。

api.js

このファイルには主にインターフェースアドレスが必要です

// 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", エラー);
    });
},
メソッド: {}
};
</スクリプト>

上記は、axios リクエストを vue でカプセル化する方法の詳細です。axios リクエストを vue でカプセル化する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • axios リクエストのカプセル化に基づく Vue アプリケーションのサンプルコード
  • Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)
  • Vue3+TypeScriptはaxiosをカプセル化し、リクエスト呼び出しを実装します
  • Vue+axiosはリクエストをカプセル化してフロントエンドとバックエンドを分離します
  • Vue が Axios リクエストとインターセプターをカプセル化する手順
  • Axios を使用して Vue プロジェクトで http リクエストをカプセル化する方法
  • Vue axios 繰り返しクリックで最後のリクエストをキャンセルするカプセル化メソッド
  • Vue プロジェクトでの axios のカプセル化リクエスト

<<:  MySQL スロークエリログの基本的な使い方チュートリアル

>>:  Windows10 HomeバージョンにDockerをインストールするときに発生する問題の概要

推薦する

js は axios 制限リクエスト キューを実装します

目次背景は次のとおりです。何が起こるでしょうか?背景は次のとおりです。実際の開発では、ネットワークの...

ドロップダウンメニューを表示または非表示にするJavaScript

この記事では、ドロップダウンメニューを表示および非表示にするJavaScriptの具体的なコードを参...

Vuex はシンプルなショッピングカート機能を実装します

この記事の例では、ショッピングカート機能を実装するためのvuexの具体的なコードを参考までに共有して...

重複データの処理に関するMySQL学習ノート

MySQLは重複データを処理します一部の MySQL テーブルには重複レコードが含まれている場合があ...

element-uiのアップロードコンポーネントでファイルやその他のパラメータを転送する際の問題を分析する

最近、element-ui を統合したプロジェクトで vuethink を使用しました。以前は bo...

MySQL の効率的なクエリの左結合とグループ化 (プラス インデックス)

mysql 効率的なクエリMySQL は、左結合の速度を上げるために group by を犠牲にし...

便利なモバイルスクロールプラグイン BetterScroll

目次スクロールをスムーズにするBetterScrollのスクロール体験慣性ローリングエッジリバウンド...

Serv-U FTPとADの完璧な統合ソリューションの詳細な説明

会社が現在使用しているソリューションを確認するためにバックエンドにログインしました。使用される FT...

文字列の最初の文字を取得してテキストアイコン機能を実現する純粋なCSS

CSS でテキストアイコンを実装する方法 /*アイコンスタイル*/ .nav-icon-norma...

CentOS 7 で Apache (httpd) サービスをインストールおよびアンインストールする詳細な手順

アンインストールまず、次のコマンドを使用して、httpd サービスがインストールされているかどうか、...

Photoshop を使って Web ワイヤーフレームを作成する方法

この投稿では、通知、画像とビデオ、フォーム フィールド、タイトル、段落、箇条書きリスト、ナビゲーショ...

スライドドアを実装するための CSS サンプルコード

いわゆるスライディングドアテクノロジーとは、さまざまな長さのテキストに合わせてボックスの背景を自動的...

MySQLループは数千万のデータを挿入する

1. テストテーブルを作成する テーブル `mysql_genarate` を作成します ( `id...

中国語と英語のフォント名の比較表(FounderとArphicを含む)

CSS ファイルでは、フォント名が文字化けしていることがよくあります。これは、作成者が中国語フォン...

HTML チュートリアル: よく使われる HTML タグのコレクション (6)

関連記事:初心者が学ぶ HTML タグ (5)導入された HTML タグは、必ずしも XHTML 仕...