実際、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をインストールするときに発生する問題の概要
フロントエンドの担当者であれば、面接でも仕事中でも、「CSS を使用して中央揃えにする」という効果に...
3日間さまざまな困難に遭遇した後、ようやくこの機能を実現しました。正常に実装できる方法を見つける前に...
目次1. 静的実装方法: 2. 第2のシミュレーション動的方法3. 3番目の動的データ方式4. 動的...
ナビゲーションバーの作成:技術要件: CS HTMLタグ達成目的:ナビゲーションバーメニューの作成コ...
方法1: var a = [1,2,3]; var b = [4,5] b を連結します。 コンソー...
デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...
CSS3お願いしますこのウェブサイトを自分で見て、パラメータを変更し、CSS3効果をオン/オフにする...
1. 準備例: 2 台のマシン: 192.168.219.146 (マスター)、192.168.21...
目次1: 単一マシンのパスワードフリーログイン構成1. 仮想マシンのホスト名を設定する2. 仮想マシ...
1: django-admin.py startproject プロジェクト名2: cd プロジェク...
この記事では、参考までにMySQL zipファイルをインストールする具体的な方法を紹介します。具体的...
複合インデックス (結合インデックスとも呼ばれます) は、複数の列に対して作成されるインデックスです...
Centos7 と Centos6 では、GRUB パスワードの設定手順に大きな違いがあります。これ...
カーソルの作成まず、MySql でデータ テーブルを作成します。 存在しない場合はテーブルを作成 `...
目次(1)はじめに: (2)クリップボードの内容をコピーする方法は次のとおりです。 (3)関数演算に...