On the interceptor of login request of vue axios

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.

Tags: Front-end axios Vue

Posted on Tue, 03 Dec 2019 07:43:52 -0500 by sangoku