Utilisation d'Axios Element pour implémenter la méthode de chargement de requête globale-js tutoriel-php.cn

Utilisation d'Axios Element pour implémenter la méthode de chargement de requête globale

亚连

Libérer： 2018-05-30 10:46:19

original

2664 Les gens l'ont consulté

Cet article présente principalement la méthode d'utilisation d'Axios Element pour implémenter le chargement global des requêtes. Maintenant, je le partage avec vous et le donne comme référence.

Contexte

Les exigences commerciales sont les suivantes : chaque fois qu'une requête est envoyée au backend, un chargement en plein écran est déclenché et plusieurs requêtes sont fusionnées en une seule. chargement.

Vue, axios, element, etc. sont actuellement utilisés dans le projet, donc l'article parle principalement de la façon d'utiliser axios et element pour implémenter cette fonction.

L'effet est le suivant :

Analyse

Tout d'abord, le chargement démarre lorsque la requête démarre, puis termine le chargement après le retour de la demande. Le but est d’intercepter les demandes et les réponses.

Ensuite, plusieurs requêtes sont fusionnées en un seul chargement.

Enfin, appelez le composant de chargement de l'élément.

Interception des requêtes et des réponses

L'utilisation de base d'axios ne sera pas décrite en détail. L'auteur utilise axios dans le projet en créant des instances.

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

Copier après la connexion

Ensuite, encapsulez la demande de publication (prendre la publication comme exemple)

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

Copier après la connexion

axios fournit une interface pour l'interception des requêtes et l'interception des réponses. Chaque requête appellera la méthode showFullScreenLoading, et chaque réponse appellera la méthode 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)
})

Copier après la connexion

<🎜. >

Ensuite, ce que fait showFullScreenLoading tryHideFullScreenLoading() est de fusionner les requêtes en même temps. Déclarez une variable needLoadingRequestCount et appelez la méthode showFullScreenLoading needLoadingRequestCount + 1 à chaque fois. Appelez la méthode tryHideFullScreenLoading(), needLoadingRequestCount - 1. Lorsque needLoadingRequestCount est égal à 0, le chargement se termine.

let needLoadingRequestCount = 0

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

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

Copier après la connexion

startLoading() et endLoading() doivent appeler la méthode de chargement de l'élément.

import { Loading } from &#39;element-ui&#39;
let loading
function startLoading() {
 loading = Loading.service({
  lock: true,
  text: &#39;加载中……&#39;,
  background: &#39;rgba(0, 0, 0, 0.7)&#39;
 })
}

function endLoading() {
 loading.close()
}

Copier après la connexion

À ce stade, les fonctions de base ont été implémentées. Chaque fois qu'une demande de publication est envoyée, un chargement en plein écran sera affiché. Plusieurs requêtes simultanées sont combinées en un seul chargement, et le chargement se termine une fois que toutes les réponses ont été renvoyées.

Amélioration de la fonction

En fait, la fonction actuelle est encore un peu pire. Si une certaine requête ne nécessite pas de chargement, ajoutez simplement le paramètre showLoading: false lors de l'envoi de la requête. Lors de l'interception de la demande et de l'interception de la réponse, déterminez si la demande nécessite un chargement. Si un chargement est requis, appelez la méthode showFullScreenLoading().

Lors de l'encapsulation de la demande de publication, l'objet de configuration a été ajouté au troisième paramètre. la configuration inclut le showloading. Traitez-les ensuite séparément dans l’intercepteur.

// 请求拦截器
$.interceptors.request.use((config) => {
 if (config.showLoading) {
  showFullScreenLoading()
 }
 return config
})

// 响应拦截器
$.interceptors.response.use((response) => {
 if (response.config.showLoading) {
  tryHideFullScreenLoading()
 }
 return response
})

Copier après la connexion

Lorsque nous appelons axios, nous mettons config dans le troisième paramètre, et axios mettra directement showloading dans le paramètre de rappel de l'intercepteur de requête, peut être utilisé directement. Il existe une clé de configuration dans la réponse du paramètre de rappel dans l'intercepteur de réponse. Cette configuration est la même que la configuration des paramètres de rappel de l'intercepteur de requêtes.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.