vue-element-admin グローバル読み込み待機中

最近の要件:

グローバルロード、すべてのインターフェースはロード待機機能を表示するかどうかを手動で制御できる必要があります

Baidu で検索してみると、インターセプターに書かれているものが多いことが分かりました。インターセプターでは、要素 ui の読み込みメソッドが呼び出されます。インターフェイスが要求されると読み込みが開始され、インターフェイスが返されるか、インターフェイスがエラーを報告して例外をスローすると、読み込みが終了します。

このアイデアは私のニーズとは少し異なるため、少し変更しました。私たちのニーズは、読み込み待機機能を表示するかどうかを手動で制御することです。手動制御であるため、インターセプターで読み込みメソッドを直接呼び出すことはできません。一歩進んで、インターフェイスを呼び出すときに、読み込みメソッドを有効にするかどうかを制御し始めます。axios の呼び出しを手動でカプセル化する必要があります。以前開発したときに axios をカプセル化しました。コード:

url: インターフェースAPI、

データ: パラメータ

dom: html でクラスまたは id を渡す場合、ロードには js の querySelector 属性メソッドが使用されるため、「./#」を追加する必要があります。この属性は、ロード待ちがページ全体のロード待ちなのか、dom の特定の部分のロード待ちなのかを区別するために使用されます。渡す必要はありません。デフォルトでは、ページ全体がロードされるまで待機します。

bool: 読み込み待機を有効にするかどうかを区別します。必須ではありません。デフォルトでは読み込み待機が有効です。

図では、複数のタイプの axios をカプセル化しています。すべてのリクエストを読み込んで待機する必要はありません。ここでのデフォルトの get リクエストは、顧客に表示する必要のない初期データを読み込むことです。

この記事で追加したパラメータは、読み込みと待機が必要かどうか、グローバルとローカルの読み込みと待機が必要かどうかを区別するためだけです。また、axiosDownload リクエストはファイル ストリーム タイプであり、特別なリクエストです。開発中のデータ処理を容易にするために区別されています。基本的に、この部分はすべて読み込まれて待機する必要があります。データがダウンロード中であることを顧客に通知する必要があるためです。

データを要求する前のメソッドを処理します。要求後の戻りメソッドはインターネット上のものとほぼ同じであり、結果が返されると終了します。

邪魔になる要素を取り除き、インターセプターの本質を直接見る

インターセプターの原理は、リクエストが開始されたときに 1 回インターセプトし、リクエストが返されたときにもう一度インターセプトすることです。インターセプターがインターセプトする前に、ロード待機が処理されています。リクエスト時にロード待機を再度呼び出す必要はありません。インターセプションを返すときに、ロード待機の終了を呼び出すだけで済みます。

以下のように表示されます。

キーのロードと待機方法を見てみましょう。この方法はインターネットで入手できます。これは基本的にインターネットマスターの方法から借用したものです。しばらく経ちましたが、どのマスターのコードだったか忘れてしまいました。マスターのコードを元のアドレスに投稿することはできません。マスターがそれを見て怒らないことを願っています。

このメソッドは基本的にここでグローバル読み込み待機を終了します

vue-element-admin グローバル読み込み待機に関するこの記事はこれで終わりです。vue-element-admin グローバル読み込みに関連するその他のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。