Verwendung von Axios Element zur Implementierung einer globalen Methode zum Laden von Anforderungen

In diesem Artikel wird hauptsächlich die Methode zur Verwendung von Axios Element zum Implementieren des globalen Anforderungsladens vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

Hintergrund

Die Geschäftsanforderung sieht so aus: Immer wenn eine Anfrage an das Backend gesendet wird, wird ein Vollbild-Ladevorgang ausgelöst und mehrere Anfragen werden zu einer zusammengeführt Laden.

Vue, Axios, Element usw. werden derzeit im Projekt verwendet, daher geht es in dem Artikel hauptsächlich um die Verwendung von Axios und Element zur Implementierung dieser Funktion.

Der Effekt ist wie folgt:

Analyse

Zuerst beginnt das Laden, wenn die Anfrage gestellt wird startet und beendet den Ladevorgang, nachdem die Anfrage zurückgegeben wurde. Es geht darum, Anfragen und Antworten abzufangen.

Dann werden mehrere Anfragen zu einem Ladevorgang zusammengeführt.

Zum Schluss rufen Sie die Ladekomponente des Elements auf.

Abfangen von Anfragen und Antworten

Die grundlegende Verwendung von Axios wird nicht im Detail beschrieben. Der Autor verwendet Axios im Projekt, indem er Instanzen erstellt.

// 创建axios实例
const $ = axios.create({
 baseURL: `${URL_PREFIX}`,
 timeout: 15000
})

Dann kapseln Sie die Post-Anfrage (nehmen Sie den Beitrag als Beispiel)

export default {
 post: (url, data, config = { showLoading: true }) => $.post(url, data, config)
}

axios stellt eine Schnittstelle zum Abfangen von Anfragen und Antworten bereit. Die Methode showFullScreenLoading wird für jede Anfrage aufgerufen, und die Methode tryHideFullScreenLoading() wird für jede Antwort aufgerufen. Deklarieren Sie eine Variable needLoadingRequestCount und rufen Sie jedes Mal die showFullScreenLoading-Methode needLoadingRequestCount + 1 auf. Rufen Sie die Methode tryHideFullScreenLoading() auf, needLoadingRequestCount - 1. Wenn needLoadingRequestCount 0 ist, wird der Ladevorgang beendet.

// 请求拦截器
$.interceptors.request.use((config) => {
 showFullScreenLoading()
 return config
}, (error) => {
 return Promise.reject(error)
})

// 响应拦截器
$.interceptors.response.use((response) => {
 tryHideFullScreenLoading()
 return response
}, (error) => {
 return Promise.reject(error)
})

startLoading() und endLoading() dienen zum Aufrufen der Lademethode des Elements.

let needLoadingRequestCount = 0

export function showFullScreenLoading() {
 if (needLoadingRequestCount === 0) {
  startLoading()
 }
 needLoadingRequestCount++
}

export function tryHideFullScreenLoading() {
 if (needLoadingRequestCount <= 0) return
 needLoadingRequestCount--
 if (needLoadingRequestCount === 0) {
  endLoading()
 }
}

Zu diesem Zeitpunkt sind die Grundfunktionen implementiert. Jedes Mal, wenn eine Post-Anfrage gesendet wird, wird ein Vollbild-Ladevorgang angezeigt. Mehrere Anfragen gleichzeitig werden zu einem Ladevorgang zusammengefasst und der Ladevorgang endet, nachdem alle Antworten zurückgegeben wurden.

Funktionsverbesserung

Eigentlich ist die aktuelle Funktion noch etwas schlechter. Wenn eine bestimmte Anfrage kein Laden erfordert, fügen Sie beim Senden der Anfrage einfach den Parameter showLoading: false hinzu. Bestimmen Sie beim Abfangen von Anforderungen und Antworten, ob die Anforderung geladen werden muss. Wenn ein Laden erforderlich ist, rufen Sie die Methode showFullScreenLoading() auf.

Beim Kapseln der Post-Anfrage wurde das Konfigurationsobjekt zum dritten Parameter hinzugefügt. config beinhaltet Showloading. Behandeln Sie sie dann separat im Abfangjäger.

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()
}

Wenn wir Axios aufrufen, fügen wir config in den dritten Parameter ein. Axios fügt Showloading direkt in den Callback-Parameter des Request-Interceptors ein . Es gibt einen Konfigurationsschlüssel in der Rückrufparameter-Antwort im Antwort-Interceptor. Diese Konfiguration ist dieselbe wie die Rückrufparameterkonfiguration des Anforderungsinterceptors.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung der globalen Einführung der bass.scss-Verarbeitungslösung durch Vue

JS erstellt einen Binärbaum zum Entfernen numerischer Arrays Detaillierte Erläuterung der Hervorhebung und Optimierung

Detaillierte Erläuterung des Einfügens von Rot-Schwarz-Bäumen und Beispiele für Javascript-Implementierungsmethoden

Das obige ist der detaillierte Inhalt vonVerwendung von Axios Element zur Implementierung einer globalen Methode zum Laden von Anforderungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!