Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)

Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)

1. 要件

Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバー インターフェイスへの Ajax リクエストが頻繁に送信されます。開発プロセスでは、プロジェクトでの使用を容易にするために、axios をさらにカプセル化する必要があります。

2. Vueプロジェクト構造

次のディレクトリ構造で Vue プロジェクトをローカルに作成します。

- パブリック静的リソースファイル
-ソース
|- アセットの静的リソースディレクトリ
|- コンポーネント パブリック コンポーネント ディレクトリ
|- http axios パッケージ ディレクトリ
|- ルータールーティング管理ディレクトリ
|- 状態管理ディレクトリを保存する
|- ビュー コンポーネント ディレクトリを表示
|- App.vue ルートコンポーネント
|- main.js エントリ ファイル
- package.json npm 設定ファイル

Vueプロジェクトにaxiosの管理ディレクトリとしてhttpディレクトリを作成します。httpディレクトリには2つのファイルがあります。

  • axiosメソッドをカプセル化する/http/index.jsファイル
  • /http/api.js 統合管理インターフェースファイル

3. コード例

/http/api.js ファイルのコードは次のとおりです。

エクスポートデフォルト{
    'users_add': '/users/add',
    'users_find': '/users/find',
    'users_update': '/users/update',
    'users_delete': '/users/delete'
}

/http/index.js ファイルのコードは次のとおりです。

'axios' から axios をインポートします
'./api' から api をインポートします

//axiosインスタンスオブジェクトを作成するlet instance = axios.create({
    baseURL: 'http://localhost:3000', //サーバーアドレス タイムアウト: 5000 //デフォルトのタイムアウト期間})

//リクエストインターセプターinstance.interceptors.request.use(config=>{
    //ここでリクエストインターセプトのコードを記述します。これは通常、読み込みウィンドウをポップアップするために使用されます。console.log('Requesting...')
    設定を返す
},エラー=>{
    console.error('リクエストが失敗しました',err)
})

//レスポンスインターセプターinstance.interceptors.response.use(res=>{
    //ここで応答データを処理します console.log('リクエストが成功しました!')
    return res //返されたオブジェクトはリクエストメソッドのレスポンスオブジェクトに渡されます},err=>{
    // 応答エラー処理 console.log('応答に失敗しました!', err)
    // Promise.reject(err) を返します。
})

//axios リクエスト メソッドをカプセル化します。パラメーターは構成オブジェクトです //option = {method,url,params} method はリクエスト メソッド、url はリクエスト インターフェイス、params はリクエスト パラメーターです async function http(option = {}) {
    結果 = null とする
    if(option.method === 'get' || option.method === 'delete'){
     // 取得および削除リクエストを処理する await instance[option.method](
                api[オプション.url],
                {パラメータ: オプション.パラメータ}
          ).then(res=>{
            結果 = res.data
        }).catch(エラー=>{
            結果 = エラー
        })
    }それ以外の場合(option.method === 'post' || option.method === 'put'){
     //POSTおよびPUTリクエストを処理する await instance[option.method](
                api[オプション.url],
                オプション.パラメータ
            ).then(res=>{
            結果 = res.data
        }).catch(エラー=>{
            結果 = エラー
        })
    }

    結果を返す
}

デフォルトのhttpをエクスポート

カプセル化された /http/index.js ファイルを main.js エントリ ファイルにインポートします。サンプル コードは次のとおりです。

'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。
'./router' からルーターをインポートします
'./store' からストアをインポートします
'./http' から http をインポートします

Vue.config.productionTip = false
Vue.prototype.$http = http

Vue.use(Elementui)

新しいVue({
  ルーター、
  店、
  レンダリング: h => h(App)
}).$mount('#app')

App.vue ルート コンポーネントで axios リクエストをテストします。サンプル コードは次のとおりです。

<テンプレート>
  <div>
    <button @click="getDate">リクエストを送信</el-button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  メソッド: {
    日付を取得する(){
      this.$http({
        メソッド: 'get'、
        url: 'users_find'
      }).then(res=>{
        コンソール.log(res)
      })

    }
  }
}
</スクリプト>

ここには http://localhost:3000/users/find インターフェースが必要です。そうでないと、リクエストは失敗します。

4. 効果の実証

Vue プロジェクトを起動し、ブラウザで Vue プロジェクトのアドレスにアクセスします。私のアドレスは http://localhost:8080 です。ボタンをクリックしてリクエストを送信します。結果は下の図のようになります。

この時点で、Vue プロジェクトで単純な axios カプセル化が完了しました。実際のニーズに応じて axios をカプセル化することもできます。この記事は参考用です。

Vue プロジェクトで axios (http リクエストの統合管理) をカプセル化する方法についてはこれで終わりです。Vue カプセル化 axios 管理 http リクエストに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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

<<:  MySQL の InnoDB ストレージ ファイルの詳細な説明

>>:  Linux の EXT シリーズファイルシステムフォーマットの詳細な説明

推薦する

MySQL 5.7.20 Green Edition のインストールの詳細なグラフィックチュートリアル

まず、MySQL とは何かを理解しましょう。 MySQL は、スウェーデンの会社 MySQL AB ...

ApacheとTomcatによるクラスタ環境構築プロセスの分析

実際、Apacheクラスタを構築するのは難しくありません。私もインターネットで情報を見つけて自分で設...

CSS BEM 命名標準の概要 (推奨)

1 BEM命名標準とはBem は、ブロック、要素、修飾子の略語であり、Yandex チームによって...

MySQL テーブルを返すとインデックスが無効になるケースの説明

導入MySQL InnoDB エンジンがレコードをクエリし、インデックス カバレッジを使用できない場...

CSS3 で @media を使用して Web ページの適応を実現するためのサンプル コード

現在、コンピュータモニターの画面解像度はますます高くなる傾向にありますが、携帯電話などのモバイルデバ...

MySQL で binlog を使用する際のフォーマットの選択方法

目次1. binlogの3つのモード1.ステートメントレベルモード2. 行レベルモード3. 混合モー...

Tomcat 実行時の JVM エンコーディングの問題を修正

質問:最近、プロジェクトを展開すると文字化けしたデータが出てきました。確認したところ、プロジェクトは...

MySQL関数の包括的な概要

目次1. MySQLでよく使われる文字列関数2. 数値関数3. 日付と時刻の機能4. プロセス機能5...

JS関数のカリー化の詳細な説明

目次1. 補足知識ポイント: 関数の暗黙的な変換2. 補足知識: call/apply を使って配列...

XHTML 特殊文字コレクション

注意&#160;ノーブレークスペース = ノーブレークスペース、 iexcl ¡ &...

jQueryはシンプルなカルーセル効果を実装します

みなさんこんにちは。今日はカルーセルの実装についてお話しします。私が作成したカルーセルの効果は次のと...

Nginx は https ウェブサイト構成コード例を実装します

https ベースポート 443。これはキーと呼ばれるものに使用されます。これらのことを理解せずにで...

CSS の position 属性の値に関する研究 (概要)

CSS の位​​置属性は要素の配置タイプを指定し、上、下、左、右を使用して要素を具体的に配置します...

マークアップ言語 -

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

ウェブサイトメンテナンスページのリスト構築のヒント

また、多くの場合、メンテナンスのために Web サイトを少なくとも数分間オフラインにする必要がありま...