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 シリーズファイルシステムフォーマットの詳細な説明

推薦する

node-media-serverを使用してシンプルなストリーミングメディアサーバーを構築する

node-media-server を使用するプロセスの一部を記録します。この記事の環境はWindo...

Vueタイムラインコンポーネントの使い方

この記事の例では、参考までにvueタイムラインコンポーネントの具体的な実装コードを共有しています。具...

JavaScript における変数と関数の昇格の詳細な例

js 実行字句解析フェーズ: 形式パラメータ解析、変数宣言解析、関数宣言解析の 3 つの部分が含まれ...

Linux で rsync を使用する方法

目次1. はじめに2. インストール3. 基本的な使い方3.1、-rパラメータ3.2、-aパラメータ...

Apache Bench で Web ストレス テストを実装する方法

1. Apache Benchの紹介ApacheBench は、Apache サーバーに付属する W...

MySQL データ ウェアハウスを保護するための 5 つのヒント

さまざまなソースからデータを集約することで、中央倉庫を作成できます。データ ウェアハウスは、ビジネス...

検索エンジンのウェブサイトの入り口の無料コレクション

1: Baiduウェブサイトログイン入口ウェブサイト: http://www.baidu.com/s...

MySQL の選択、挿入、更新バッチ操作ステートメントのコード例

プロジェクトでは、データを操作するためにバッチ操作ステートメントが必要になることがよくあります。バッ...

ウェブページのカスタム選択ボックス選択

選択ドロップダウン リスト フォームは誰もがよく知っているかもしれませんが、デフォルトのドロップダウ...

nginx を使用したプロキシ サーバーの設定

Nginx は、リバース プロキシ機能を使用して負荷分散を実装できるほか、フォワード プロキシ機能を...

Docker を使用した Laravel アプリケーションのデプロイ例

この記事で使用されているPHPベースイメージはphp:7.3-apacheです。この記事の Lara...

CSS と Bootstrap アイコンを使用して、上下にジャンプするインジケーター矢印のアニメーション効果を作成します。

ページが非常に長い場合は、下にさらにコンテンツがあることをユーザーに知らせるために矢印が必要になるこ...

MySQLでANDとORを組み合わせる問題を解決する

以下のように表示されます。 SELECT prod_name,prod_price FROM pro...

Ubuntu 18.04 のインストールで「ldlinux.c32 のロードに失敗しました」というエラーが表示され、解決手順がわかりません

序文私は Win7 を搭載した古いラップトップを持っています。古いシステムを維持しながら、同時に U...

MySql インデックスの詳細な紹介と正しい使用方法

MySql インデックスの詳細な紹介と正しい使用方法1. はじめに:インデックスはクエリ速度に重大な...