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 のインストールと設定方法のグラフィックチュートリアル

推薦する

Mac に mysql5.7 をインストールするための完全な手順 (画像とテキスト付き)

最近、Mac システムを使用して、ローカル Web サーバー環境を構築する準備をしていました。 Ma...

SQL の左結合と右結合の原理と例の分析

テーブルが 2 つあり、テーブル A のレコードがテーブル B に存在しない可能性があります。左結合...

vue3 を使用してカウント関数コンポーネントのカプセル化例を実装する

目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. アイデア2. 準備2. ...

Docker イメージのダウンロードが遅すぎる場合の解決策

Docker イメージのダウンロードが停止したり、遅すぎたりするネットでいろいろな方法を検索しました...

テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加によく使用される MySQL の SQL 文の概要

この記事では、テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加を行う一般的な ...

私のCSSアーキテクチャのコンセプト - それは人によって異なり、ベストなものはなく、適切なものだけがある

はじめに<br />私はフロントエンド分野でかなり長い間働いており、CSS分野でも長い間...

Linux で xargs コマンドを使用する詳細なチュートリアル

みなさんこんにちは。私は梁旭です。 Linux を使用しているときに、いくつかのコマンドを連結する必...

CSS スタイルの競合を解決するいくつかの方法 (要約)

1. セレクターを調整するコンビネータを使用すると、セレクターの説明をより正確に記述できます (C...

iframe 適応サイズ実装コード

ページドメインの関係:メインページ a.html はドメイン A: www.jb51.net に属し...

動的な背景グラデーション効果を実現するCSS3

CSS3 を学ぶということは、新しい機能と基本的な理論に慣れることを意味します。この記事では、ケー...

MySql ログイン パスワードを忘れた場合とパスワードを忘れた場合の解決策

方法1: MySQL では、次のコマンド ラインで MySQL サーバーを起動することにより、アクセ...

マインドマップを使って4つの側面からWeb標準の価値を議論する

このアイデアを改善し、より良い意見を得られることを期待して、議論を刺激するためにいくつかの値を大まか...

CSS3 変換遷移ジッター問題の解決

transform: scale(); スケーリングするとIEブラウザでジッターが発生します変換スケ...

Expressを使用してプロジェクトを自動的にビルドするNode.jsのプロセス全体

1. Expressライブラリとジェネレータをインストールするcmdを開いて、次のコマンドを入力しま...