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をインストールするときに発生する問題の概要

推薦する

CSS3は水平方向の中央揃え、垂直方向の中央揃え、水平方向と垂直方向の中央揃えのサンプルコードを実装しています。

フロントエンドの担当者であれば、面接でも仕事中でも、「CSS を使用して中央揃えにする」という効果に...

UniappはBaidu Voiceを使用して録音をテキストに変換する機能を実現

3日間さまざまな困難に遭遇した後、ようやくこの機能を実現しました。正常に実装できる方法を見つける前に...

VUE でタブページを切り替える 4 つの方法

目次1. 静的実装方法: 2. 第2のシミュレーション動的方法3. 3番目の動的データ方式4. 動的...

トップナビゲーションバーメニューを作成するためのHTML+CSS

ナビゲーションバーの作成:技術要件: CS HTMLタグ達成目的:ナビゲーションバーメニューの作成コ...

JavaScript 配列のマージのケーススタディ

方法1: var a = [1,2,3]; var b = [4,5] b を連結します。 コンソー...

Dockerコンテナとホストマシン間の8時間の差の問題を解決する

デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...

よく使われるシングルページアプリケーションウェブサイト共有

CSS3お願いしますこのウェブサイトを自分で見て、パラメータを変更し、CSS3効果をオン/オフにする...

CentOS 7.x のマスターおよびスレーブ DNS サーバーの展開

1. 準備例: 2 台のマシン: 192.168.219.146 (マスター)、192.168.21...

パスワードログインなしのLinux構成スタンドアロンおよびフルディストリビューションの詳細なチュートリアル

目次1: 単一マシンのパスワードフリーログイン構成1. 仮想マシンのホスト名を設定する2. 仮想マシ...

Django プロジェクトを作成して MySQL に接続する方法

1: django-admin.py startproject プロジェクト名2: cd プロジェク...

mysql zipファイルのインストールチュートリアル

この記事では、参考までにMySQL zipファイルをインストールする具体的な方法を紹介します。具体的...

MySQL複合インデックスの詳細な研究

複合インデックス (結合インデックスとも呼ばれます) は、複数の列に対して作成されるインデックスです...

CentOS 7 で grub パスワードと単一ユーザー ログインを設定するサンプル コード

Centos7 と Centos6 では、GRUB パスワードの設定手順に大きな違いがあります。これ...

MySQL カーソルの定義と使用法

カーソルの作成まず、MySql でデータ テーブルを作成します。 存在しない場合はテーブルを作成 `...

clipboard.js の使用法の概要

目次(1)はじめに: (2)クリップボードの内容をコピーする方法は次のとおりです。 (3)関数演算に...