The global request is implemented with the Axios Element loading

Kapture 2018-06-07 at 14.57.40.gifdemo in GitHub background

Business requirements are such that a full-screen loading is triggered whenever a request is sent to the backend, and multiple requests are merged into a single loading.
Now the project is using Vue, Axios, element, etc., so the article is mainly about the use of Axios and element to achieve this function.

Analysis

First, the request begins with a loading, and then ends loading after the request returns. The point is to intercept requests and responses.
Then, to resolve multiple requests, merge the loading into a single time.
Finally, the loading component of element is called.

Intercept requests and responses

The basic use of Axios does not repeat. The author uses Axios in the project as a way to create an instance.

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

Then encapsulate the POST request (for example, POST)

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

Axios provides an interface for request interception and response interception, each request invokes a method showFullScreenLoading , and each response invokes a 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 showfullscreenloading tryhidefullscreenloading () The thing to do is to merge requests at the same time. Declare a variable, needloadingrequestcount , each time you call the showfullscreenloading method Needloadingrequestcount + 1 . Call the tryhidefullscreenloading () method, needLoadingRequestCount-1 . Needloadingrequestcount is 0 o'clock, ending loading.

let needloadingrequestcount = 0< Span class= "Hljs-keyword" >export function showfullscreenloading (if ( Needloadingrequestcount = = = 0) {startloading ()} Needloadingrequestcount++}export function  Tryhidefullscreenloading (if (Needloadingrequestcount < = 0) return needloadingrequestcount-- if (needloadingrequestcount = = 0) {endloading ()}}    

startLoading()And endLoading() is the loading method that calls element.

import { Loading } from ‘element-ui‘let loadingfunction startLoading() { loading = Loading.service({ lock: true, text: ‘加载中……‘, background: ‘rgba(0, 0, 0, 0.7)‘ })}function endLoading() { loading.close()}

Here, the basic functionality has been realized. A full-screen loading will be displayed for each POST request. Multiple requests at the same time are merged into a single loading, and after all responses are returned, the loading is ended.

Feature Enhancements

In fact, today's features are almost as yet. If a request does not require a loading, then add a parameter when the request is made showLoading： false . When requesting interception and response interception, it is necessary to determine whether the request needs to be loading and loading to call the showFullScreenLoading() method.

When encapsulating a POST request, the Config object has been added to the third parameter. Config contains the showloading . It is then processed 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})

When we call Axios, we put the config in the third parameter, Axios will directly put the showloading in the request interceptor callback parameters, can be used 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 for the request interceptor.

Updated: 2018-6-7 loading requested during a certain interval of time

The above code has already implemented the merging of loading with time coincident, what does it mean? Please look

Image.png

At the end of Request1 's loading, REQUEST2 's loading has begun. This situation request1 and request2 have a certain overlap in time, so loading can be merged.

Then REQUEST3 is at the end of the request2 after 100ms loading. You will find loading two times, and a very short blink in the middle, which is certainly a bad experience.

We only need to modify tryhidefullscreenloading to:

export  function tryhidefullscreenloading ( if (Needloadingrequestcount <= 0) return needloadingrequestcount-- if (needloadingrequestcount = = 0) {_.debounce ( trycloseloading, 300) ()}}const trycloseloading =  () = {if (needloadingrequestcount = = = 0) {Loading.close ()}}           

In previous releases, the Tryhidefullscreenloading method would have judged Needloadingrequestcount = = 0 to close loading immediately. Now use Lodash. Debounce, delay 300ms and then call the Trycloseloading method.

Now the loading in the 300ms interval is also merged into one time ...

The global request is implemented with the Axios Element loading