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 サイトの他の関連記事を参照してください。