Use Axios Element to implement the global request loading method, axiosloading

Use Axios Element to implement the global request loading method, axiosloading

Background

This is the business requirement. Each time a request is sent to the backend, a full-screen loading is triggered, and multiple requests are merged into one loading.

Currently, vue, axios, and element are used in the project. This article mainly describes how to use axios and element to implement this function.

The effect is as follows:

Analysis

First, start loading at the beginning of the request, and then end loading after the request is returned. The focus is to intercept requests and responses.

Then, Merge multiple requests into one loading.

Finally, call the loading component of the element.

Intercept requests and responses

The basic usage of axios is not described in detail. In my project, I use axios to create an instance.

// Create an axios instance const $ = axios. create ({baseURL: '$ {URL_PREFIX}', timeout: 15000 })

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

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

Axios provides an interface for Request Interception and response interception. Each request calls the showFullScreenLoading method, and each response calls the tryHideFullScreenLoading () method.

// Request interceptor $. interceptors. request. use (config) =>{ showFullScreenLoading () return config}, (error) =>{ return Promise. reject (error)}) // response interceptor $. interceptors. response. use (response) =>{ tryHideFullScreenLoading () return response}, (error) =>{ return Promise. reject (error )})

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

let needLoadingRequestCount = 0export function showFullScreenLoading() { if (needLoadingRequestCount === 0) {  startLoading() } needLoadingRequestCount++}export function tryHideFullScreenLoading() { if (needLoadingRequestCount <= 0) return needLoadingRequestCount-- if (needLoadingRequestCount === 0) {  endLoading() }}

StartLoading () and endLoading () call the loading Method of element.

Import {Loading} from 'element-UIS 'let loadingfunction startLoading () {loading = Loading. service ({lock: true, text:' Loading ...... ', Background: 'rgba (0, 0, 0, 0.7)'})} function endLoading () {loading. close ()}

By now, the basic functions have been implemented. Each post request will display the full screen loading. Multiple requests at the same time are merged into one loading. After all responses are returned, the loading ends.

Function Enhancement

In fact, the current function is still poor. If a request does not require loading, add the showLoading: false parameter when sending the request. When the request is intercepted and the response is blocked, determine whether the request requires loading. You need to call the showFullScreenLoading () method after loading.

When the post request is encapsulated, the config object has been added to the third parameter. Config contains showloading. And then process them separately in the interceptor.

// Request interceptor $. interceptors. request. use (config) => {if (config. showLoading) {showFullScreenLoading ()} return config}) // response interceptor $. interceptors. response. use (response) => {if (response. config. showLoading) {tryHideFullScreenLoading ()} return response })

When calling axios, we put config in the third parameter. axios directly places showloading In the callback parameter of the request interceptor, which can be directly used. The callback parameter response in the response interceptor has a config key. This config is the same as the callback parameter config of the request interceptor.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.