ホームページ > 記事 > ウェブフロントエンド > Axios 要素を使用してグローバル リクエスト ロード メソッドを実装する
この記事では主にAxios Elementを使用してグローバルリクエストロードを実装する方法を紹介しますので、参考にしてください。
バックグラウンド
ビジネス要件は次のようになります。リクエストがバックエンドに送信されるたびに、全画面読み込みがトリガーされ、複数のリクエストが 1 つの読み込みにマージされます。
現在プロジェクトではVue、axios、element等を使用しているため、この記事では主にaxiosとelementを使ってこの機能を実装する方法について説明します。
効果は次のとおりです:
分析
まず、リクエストの開始時にロードが開始され、リクエストが返された後にロードが終了します。ポイントは、リクエストとレスポンスをインターセプトすることです。
その後、複数のリクエストを 1 つの読み込みにマージする必要があります。
最後に、要素の読み込みコンポーネントを呼び出します。
リクエストとレスポンスのインターセプト
axios の基本的な使い方については詳しく説明しません。著者はインスタンスを作成してプロジェクト内で axios を使用します。
// 创建axios实例 const $ = axios.create({ baseURL: `${URL_PREFIX}`, timeout: 15000 })
次に、postリクエストをカプセル化します(例としてpostを取り上げます)
export default { post: (url, data, config = { showLoading: true }) => $.post(url, data, config) }
axiosは、リクエストごとにshowFullScreenLoadingメソッドが呼び出され、tryHideFullScreenLoadingが呼び出されます。 () メソッド
// 请求拦截器 $.interceptors.request.use((config) => { showFullScreenLoading() return config }, (error) => { return Promise.reject(error) }) // 响应拦截器 $.interceptors.response.use((response) => { tryHideFullScreenLoading() return response }, (error) => { return Promise.reject(error) })
次に、showFullScreenLoading tryHideFullScreenLoading() が行うことは、リクエストを同時にマージすることです。変数 needLoadingRequestCount を宣言し、毎回 showFullScreenLoading メソッド needLoadingRequestCount + 1 を呼び出します。 tryHideFullScreenLoading() メソッドを呼び出します (needLoadingRequestCount - 1)。 needLoadingRequestCountが0になるとロードが終了します。
let needLoadingRequestCount = 0 export function showFullScreenLoading() { if (needLoadingRequestCount === 0) { startLoading() } needLoadingRequestCount++ } export function tryHideFullScreenLoading() { if (needLoadingRequestCount <= 0) return needLoadingRequestCount-- if (needLoadingRequestCount === 0) { endLoading() } }
startLoading()とendLoading()は要素のloadingメソッドを呼び出します。
import { Loading } from 'element-ui' let loading function startLoading() { loading = Loading.service({ lock: true, text: '加载中……', background: 'rgba(0, 0, 0, 0.7)' }) } function endLoading() { loading.close() }
この時点で、基本的な機能は実装されました。投稿リクエストが送信されるたびに、全画面ロードが表示されます。同時に複数のリクエストが 1 つのロードに結合され、すべての応答が返された後にロードが終了します。
機能強化
実は、現在の機能ではまだ少し物足りません。特定のリクエストにロードが必要ない場合は、リクエストの送信時に showLoading: false パラメータを追加するだけです。リクエストのインターセプトおよびレスポンスのインターセプト中に、リクエストにロードが必要かどうかを判断します。ロードが必要な場合は、showFullScreenLoading() メソッドを呼び出します。
POST リクエストをカプセル化するときに、config オブジェクトが 3 番目のパラメーターに追加されました。 config には showloading が含まれています。次に、インターセプターでそれらを個別に処理します。
// 请求拦截器 $.interceptors.request.use((config) => { if (config.showLoading) { showFullScreenLoading() } return config }) // 响应拦截器 $.interceptors.response.use((response) => { if (response.config.showLoading) { tryHideFullScreenLoading() } return response })
axios を呼び出すとき、3 番目のパラメーターに config を指定すると、Axios はリクエスト インターセプターのコールバック パラメーターに showloading を直接入れます。これは直接使用できます。応答インターセプターのコールバック パラメーター応答には設定キーがあります。この設定はリクエスト インターセプタのコールバック パラメータ設定と同じです。
上記をあなたのためにまとめました。将来お役に立てば幸いです。
関連記事:
Vueによるbass.scss処理ソリューションのグローバル導入の詳細説明
jsによる重複排除と数値配列の最適化のためのバイナリツリー構築
赤黒ツリー挿入の詳細説明と Javascript 実装メソッドの例
以上がAxios 要素を使用してグローバル リクエスト ロード メソッドを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。