When we are making interface requests, such as when we judge the login timeout, it is usually the interface returns a specific error code. If we judge a time-consuming and labor-consuming interface, we can use interceptors to intercept unified http requests. 
1. Install and configure axios
cnpm install --save axios
We can create a JS file to do this unified processing. Create a new axios.js, as follows
import axios from 'axios' import { Indicator } from 'mint-ui'; import { Toast } from 'mint-ui'; // http request interceptor axios.interceptors.request.use( config => { Indicator.open() return config; }, err => { Indicator.close() return Promise.reject(err); }); // http response interceptor axios.interceptors.response.use( response => { Indicator.close() return response; }, error => { Indicator.close() }); //Welcome to join the front-end full stack development and communication circle to blow water, chat, learn and exchange: 864305860 export default axios
Then introduce the JS file into main.js
import axios from './axio'; Vue.prototype.$axios = axios;
In this way, Axios can be used to request, and this.axios can be used to call in components
this.$axios({ url:requestUrl+'homePage/v1/indexNewPropertiesResult', method:'POST', }).then(function(response){ //Interface return data console.log(response) that.modulesArr=response.data.data.modules; // that.getRecommendGoods(0); });//Welcome to join the front-end full stack development and communication circle to blow water, chat, learn and exchange: 864305860
Only by using the Axios request interface can we intercept it. Now it can be intercepted in axios.js. You can do the operations you need in two states
Supplement:
- axios uses interceptors to handle all http requests in a unified way
- axios uses interceptors
- Intercept requests or responses before they are processed by then or catch.
http request interceptor
// Add request interceptor axios.interceptors.request.use(function (config) { // What to do before sending the request return config; }, function (error) { // What to do about request errors return Promise.reject(error); });//Welcome to join the front-end full stack development and communication circle to blow water, chat, learn and exchange: 864305860
HTTP responses interceptor
// Add response interceptor axios.interceptors.response.use(function (response) { // What to do with response data return response; }, function (error) { // What to do about response errors return Promise.reject(error); });//Welcome to join the front-end full stack development and communication circle to blow water, chat, learn and exchange: 864305860
Remove interceptor
var myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);
Add interceptors for custom axios instances
var instance = axios.create(); instance.interceptors.request.use(function () {/*...*/});
epilogue
Thank you for watching. If you have any shortcomings, please correct them.