Home > Web Front-end > JS Tutorial > body text

Using Axios Element to implement global request loading method

亚连
Release: 2018-05-30 10:46:19
Original
2612 people have browsed it

This article mainly introduces the method of using Axios Element to implement global request loading. Now I share it with you and give it as a reference.

Background

The business requirement is like this. Whenever a request is sent to the backend, a full-screen loading is triggered, and multiple requests are merged into one loading.

The current project uses vue, axios, element, etc., so the article mainly talks about how to use axios and element to implement this function.

The effect is as follows:

Analysis

First, load starts when the request starts, and then End loading after the request returns. The point is to intercept requests and responses.

Then, multiple requests must be merged into one loading.

Finally, call the loading component of element.

Intercepting requests and responses

The basic usage of axios will not be described in detail. The author uses axios in the project by creating instances.

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

Then encapsulate the post request (take post as an example)

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

axios Provides interfaces for request interception and response interception. The showFullScreenLoading method will be called for each request, and the tryHideFullScreenLoading() method will be called for each response.

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

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

Then showFullScreenLoading tryHideFullScreenLoading( ) to do is to merge requests at the same time. Declare a variable needLoadingRequestCount, and call the showFullScreenLoading method needLoadingRequestCount 1 each time. Call tryHideFullScreenLoading() method, needLoadingRequestCount - 1. When needLoadingRequestCount is 0, loading ends.

let needLoadingRequestCount = 0

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

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

startLoading() and endLoading() are to call the loading method of element.

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()
}
Copy after login

At this point, the basic functions have been implemented. Every time a post request is sent, a full-screen loading will be displayed. Multiple requests at the same time are combined into one loading, and loading ends after all responses are returned.

Function enhancement

In fact, the current function is still a little bit worse. If a certain request does not require loading, then just add the showLoading: false parameter when sending the request. During request interception and response interception, determine whether the request requires loading. If loading is required, call the showFullScreenLoading() method.

When encapsulating the post request, the config object has been added to the third parameter. config includes showloading. Then handle them separately in the interceptor.

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

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

When we call axios, we put config in the third parameter. Axios will directly put showloading in the callback parameter of the request interceptor. You can Use directly. There is a config key in the callback parameter response in the response interceptor. This config is the same as the callback parameter config of the request interceptor.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of Vue’s global introduction of bass.scss solution

js builds a binary tree to remove numerical arrays Detailed explanation of emphasis and optimization

Detailed explanation of red-black tree insertion and Javascript implementation method example

The above is the detailed content of Using Axios Element to implement global request loading method. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!