起源あるページではすべてのデータをダウンロードする必要があり、ダウンロードするデータの量が多く、インターフェースの遅延が長くなります... あるページの初期データの読み込みには時間がかかりますが、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: MySQL 8.0.15 のインストールと設定方法のグラフィックチュートリアル
最近、Mac システムを使用して、ローカル Web サーバー環境を構築する準備をしていました。 Ma...
テーブルが 2 つあり、テーブル A のレコードがテーブル B に存在しない可能性があります。左結合...
目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. アイデア2. 準備2. ...
Docker イメージのダウンロードが停止したり、遅すぎたりするネットでいろいろな方法を検索しました...
この記事では、テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加を行う一般的な ...
はじめに<br />私はフロントエンド分野でかなり長い間働いており、CSS分野でも長い間...
みなさんこんにちは。私は梁旭です。 Linux を使用しているときに、いくつかのコマンドを連結する必...
1. セレクターを調整するコンビネータを使用すると、セレクターの説明をより正確に記述できます (C...
1. docker.serviceファイルを編集する: : vi /usr/lib/systemd/...
ページドメインの関係:メインページ a.html はドメイン A: www.jb51.net に属し...
CSS3 を学ぶということは、新しい機能と基本的な理論に慣れることを意味します。この記事では、ケー...
方法1: MySQL では、次のコマンド ラインで MySQL サーバーを起動することにより、アクセ...
このアイデアを改善し、より良い意見を得られることを期待して、議論を刺激するためにいくつかの値を大まか...
transform: scale(); スケーリングするとIEブラウザでジッターが発生します変換スケ...
1. Expressライブラリとジェネレータをインストールするcmdを開いて、次のコマンドを入力しま...