実際、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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL スロークエリログの基本的な使い方チュートリアル
>>: Windows10 HomeバージョンにDockerをインストールするときに発生する問題の概要
目次背景は次のとおりです。何が起こるでしょうか?背景は次のとおりです。実際の開発では、ネットワークの...
この記事では、ドロップダウンメニューを表示および非表示にするJavaScriptの具体的なコードを参...
この記事の例では、ショッピングカート機能を実装するためのvuexの具体的なコードを参考までに共有して...
MySQLは重複データを処理します一部の MySQL テーブルには重複レコードが含まれている場合があ...
最近、element-ui を統合したプロジェクトで vuethink を使用しました。以前は bo...
mysql 効率的なクエリMySQL は、左結合の速度を上げるために group by を犠牲にし...
目次スクロールをスムーズにするBetterScrollのスクロール体験慣性ローリングエッジリバウンド...
会社が現在使用しているソリューションを確認するためにバックエンドにログインしました。使用される FT...
CSS でテキストアイコンを実装する方法 /*アイコンスタイル*/ .nav-icon-norma...
アンインストールまず、次のコマンドを使用して、httpd サービスがインストールされているかどうか、...
この投稿では、通知、画像とビデオ、フォーム フィールド、タイトル、段落、箇条書きリスト、ナビゲーショ...
いわゆるスライディングドアテクノロジーとは、さまざまな長さのテキストに合わせてボックスの背景を自動的...
1. テストテーブルを作成する テーブル `mysql_genarate` を作成します ( `id...
CSS ファイルでは、フォント名が文字化けしていることがよくあります。これは、作成者が中国語フォン...
関連記事:初心者が学ぶ HTML タグ (5)導入された HTML タグは、必ずしも XHTML 仕...