Loading is essential in applications with many requests. Otherwise, the application or device is considered to be stuck

In common projects, each request basically requires manual loading, not to mention some trouble. In the case of Asynchronous Ajax, if loading synchronization is not done properly, loading will often fail, and different browsers have poor compatibility.

A concept.

In the Vue project, there is a unified configuration mechanism, which can realize the configuration of loading so that loading automatically occurs before each request and loading disappears after the request. As mentioned in the table, it is quite useful to switch Ajax to synchronous mode, but AXIos does not have the synchronization function. The tutorial is here: element.eleme.cn/2.0/#/zh-CN…

The first method is to add v-loading instruction where loading is required. This method can be used in small applications, but is too tedious in large applications

The second is the way of service:

The last sentence is important, that is, if there are multiple requests on the page, if the same service loading is used, it is likely that the one that ends the request faster will stop loading, while the request takes a long time and does not end the request. This point needs to be paid attention to in the following design

2. Implement

In main.js, introduce vue, Axios,elementui

import Vue from 'vue' import App from './App' import router from './router' import elementui from 'element-ui' import 'elder-ui /lib/theme-chalk/index.css' import axios from 'axios' import {Loading} from' elder-ui ' Prototype.$axios=axios // install various plugins vue. use(elementui) let loading; Let loadingNum=0; Function startLoading() {if(loadingNum==0){loading = loading. service({lock: true, text: 'loading... ', background:'rgba(255,255,255,0.5)',})} // loadingNum++; } function endLoading() {loadingNum-- if(loadingNum<=0){loading.close()}} // Request data interceptor axios.interceptors.request.use(request => { startLoading(); return request }, err => { return Promise.reject(err); }); / / receive the response interceptor axios. Interceptors. Response. Use (response = > {endLoading (); return response }, err => { endLoading(); If (err && err. Response) {switch (err. Response. status) {case 400: err.message = 'Request error (400)'; break; case 401: this.$router.push('/login'); break; Case 403: err.message = 'access denied (403)'; break; Case 404: err.message = 'Request error (404)'; break; Case 408: err.message = 'Request timed out '; break; Case 500: err.message = 'Server error (500)'; break; Case 501: err.message = 'Service not implemented (501)'; break; Case 502: err.message = 'network error (502)'; break; Case 503: err.message = 'Service unavailable '; break; Case 504: err.message = 'Network timeout (504)'; break; Case 505: err.message = 'HTTP version not supported (505)'; break; Default: err.message = 'Connection error (${err.response.status})! `; }} else {err.message = 'Failed to connect to server! ' } message.error(err.message); return Promise.reject(err); }); /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App }, data: { eventHub: new Vue() } })Copy the code

As loading is only an instance, the number of requests needs to be controlled. One request is added at the beginning of each request and one request is subtracted at the end of each request. Loading will stop when the number of requests is 0.

After this configuration, other components in the application will automatically disappear loading every time they invoke axios.

Solve the problem of custom style

At this point, the loading style of each request is exactly the same. What if some requests require another loading style? To use the principle that there is only one instance of loading in a service, you only need to create an instance of loading before the request is made. After an instance is created, the instance will continue to be used. The name of loading is changed.

Just add this to each request that needs to be styled