Axios はリクエストをキャンセルし、重複リクエストを回避します

Axios はリクエストをキャンセルし、重複リクエストを回避します

起源

あるページではすべてのデータをダウンロードする必要があり、ダウンロードするデータの量が多く、インターフェースの遅延が長くなります...

あるページの初期データの読み込みには時間がかかりますが、1 回の検索は高速です。初期データの読み込み中は検索インターフェイスに戻り、その後の初期データの戻りで検索データの表示をカバーします。

このような状況では、次のことが必要です。

  • リクエストを手動でキャンセル/終了する機能。
  • 一部のページ インターフェイスでは、一度に 1 つのリクエストしか受け付けられません。

現状

このシステムは、Laoge Huakucha のオープンソース vue-element-admin をベースに二次開発したものです。リクエストは axios を使用しており、カプセル化された request.js のキーコードは次のとおりです。

// axiosインスタンスを作成する
constサービス = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = ベース URL + リクエスト URL
  withCredentials: true, // クロスドメインリクエスト時にCookieを送信する
  timeout: 500000, // リクエストタイムアウト
  変換リクエスト: [関数(データ) {
    // データに対して任意の変換を実行します return Qs.stringify({
      ...データ
    },
    // 配列変換 { arrayFormat: 'brackets' })
  }]
})

// リクエストインターセプター
サービスインターセプターリクエストの使用(
  設定 => {
    // リクエストが送信される前に何かを行う

    (store.getters.token)の場合{
      // 各リクエストにトークンを持たせる
      // ['X-Token']はカスタムヘッダーキーです
      // 実際の状況に応じて変更してください
      config.headers['token'] = getToken()
    }
    設定を返す
  },
  エラー => {
    // リクエストエラーに対して何かを行う
    console.log(error) // デバッグ用
    Promise.reject(error) を返します。
  }
)

リクエストを開始する方法:

エクスポート関数remoteApi(data) {
  リクエストを返す({
    URL: '/api',
    メソッド: 'post'、
    データ
  })
}

リクエストをキャンセル cancelToken

公式ドキュメント: キャンセル:

CancelToken は axios.CancelToken に置き換えられます。
const ソース = CancelToken.source();

axios.get('/user/12345', {
  キャンセルトークン: ソース.token
}).catch(関数(スロー) {
  もし(axios.isCancel(スロー)){
    console.log('リクエストがキャンセルされました', throwed.message);
  } それ以外 {
     // エラーを処理する }
});

axios.post('/user/12345', {
  名前: '新しい名前'
}, {
  キャンセルトークン: ソース.token
})

// リクエストをキャンセルします(メッセージパラメータはオプションです)
source.cancel('ユーザーによって操作がキャンセルされました。');

リクエスト方法の変更

エクスポート関数 remoteApi(data, cancelToken) {
  リクエストを返す({
    URL: '/api',
    メソッド: 'post'、
    キャンセルトークン、
    データ
  })
}

実際のリクエストを行うときは、cachelToken を作成します。

// コンポーネントメソッドで this.cancelToken = CancelToken.source()
remoreApi(データ、this.cancelToken)、then(....)、catch(....)、finally(....)

リクエストをキャンセルするには、次を実行します。

// コンポーネントメソッドで this.cancelToken.cancel('ダウンロードをキャンセル')

重複したリクエストを避ける

遅延の長いインターフェースの戻りデータが別のインターフェースの戻りデータを上書きしてデータ表示エラーが発生するのを防ぐため、インターフェースへの要求を繰り返し実行しないでください。アイデアは比較的シンプルで、グローバル マップを使用してリクエスト ID と対応する cancelTokens を保存します。リクエストを開始する前に、リクエスト識別子に応じて対応する cancelToken の cancel メソッドを呼び出し、条件を満たす新しいリクエストを発行します。

要約する

axios リクエストのキャンセルと重複リクエストの回避に関するこの記事はこれで終わりです。axios リクエストのキャンセルの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Axios グローバル リクエスト パラメータ設定、リクエストおよびリターン インターセプター メソッド
  • Vue が Axios リクエストとインターセプターをカプセル化する手順
  • Vue axios 繰り返しクリックで最後のリクエストをキャンセルするカプセル化メソッド
  • Axios で繰り返して無駄なリクエストをキャンセルする方法
  • Axiosは繰り返しのリクエストをキャンセル
  • Vue axios インターセプターは、繰り返しリクエストのキャンセルによく使用されます。

<<:  MLSQLコンパイル時権限制御例の詳細な説明

>>:  MySQL 8.0.15 のインストールと設定方法のグラフィックチュートリアル

推薦する

Dockerfileを使用して独自のイメージを作成する方法

1. 空のディレクトリを作成する $ cd /home/xm6f/dev $ mkdir myapp...

Nginx rtmp モジュールのコンパイル ARM バージョンの問題

目次1. 準備: 2. ソースコードのコンパイル1. 設定する2. コンパイルエラー3. ターゲット...

Vue2.x における双方向バインディングの原理と実装

目次1. 実施プロセス2. オブザーバーを表示する3. ウォッチャーを実装する4. コンパイルを実装...

MySQLの論理アーキテクチャに関する深い理解

MySQL は現在、ほとんどの企業や事業体で使用されているデータベースです。MySQL が使用される...

HTMLのmarquee属性でテキストを踊らせる

構文: <marquee> …</marquee>モバイル属性マーキーを使用...

DOCTYPE宣言の機能と使い方の詳しい説明

1. ブラウザのレンダリングモードとdoctype一部の Web ページは標準に従って作成されていま...

ラジオボタンと複数選択ボタンは画像を使用してスタイル設定されます

ラジオ ボタンや複数選択ボタンにスタイルを追加する方法や、ボタンを大きくする方法を尋ねる人を以前見か...

MySQLストアドプロシージャの原理と使用法の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...

優れたHTML印刷コードがページめくりをサポート

ylbtech_html_print HTML 印刷コード、ページめくりをサポートコードをコピーコー...

VMwareがモジュールディスクを早期に開けない場合の解決策の詳細な説明

VMWare (Virtual Machine ware) は、「仮想 PC」ソフトウェア会社です。...

Node.js+express+socket でオンラインのリアルタイム多人数チャットルームを実現

この記事では、オンラインリアルタイム多人数チャットルームを実現するためのNode.js+expres...

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

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

setup+ref+reactive は vue3 の応答性を実装します

セットアップは、結合された API を記述するために使用されます。テンプレートが使用できるようにする...

HTMLのリストタグを数える

1. <dl>はリストを定義し、<dt>はリスト内の項目を定義し、<d...

CentOS8でルートパスワードを素早く変更する方法

Centos8仮想マシンを起動し、上下キーを押して図1のインターフェースの最初の行を選択します。図1...