Introduction to axios
axios is an HTTP client based on Promise for browsers and nodejs, which itself has the following characteristics:
Create XMLHttpRequest from the browser
Make an http request from
Support Promise API
Intercept requests and responses
Convert request and response data
Cancel request
Automatically convert JSON data
Client support to prevent CSRF/XSRF
The following code introduces vue axios request interception, the specific code is as follows:
import axios from 'axios';//Introduce axios dependenciesimport { Message } from 'element-ui'; import Cookies from 'js-cookie'; //Introduce cookie operation dependenciesimport router from '@/router/index'//Introduce routing objects = 5000; =''; //http request encapsulate request header interceptor( config => { var token = '' if(typeof ('user') === 'undefined'){ //It's empty at this time }else { token = (('user')).token }//Note that when using it, you need to introduce cookie methods. Recommend js-cookie = (); = { 'Content-Type':'application/json' } if(token != ''){ = token; } return config; }, error => { return (err); } ); //http response encapsulates the background return interceptor( response => { //Redirect to login page when the return information is not logged in or the login is invalid if( == 'W_100004' || == 'The user is not logged in or the login timeout, please log in! '){ ({ path:"/", querry:{redirect:}//Which page to jump from }) } return response; }, error => { return (error) } ) /** * Encapsulation get method * @param url * @param data * @returns {Promise} */ export function fetch(url,params={}){ return new Promise((resolve,reject) => { (url,{ params:params }) .then(response => { resolve(); }) .catch(err => { reject(err) }) }) } /** * Encapsulate post request * @param url * @param data * @returns {Promise} */ export function post(url,data = {}){ return new Promise((resolve,reject) => { (url,data) .then(response => { resolve(); },err => { reject(err) }) }) } /** * Encapsulate Excal file request * @param url * @param data * @returns {Promise} */ export function exportExcel(url,data = {}){ return new Promise((resolve,reject) => { axios({ method: 'post', url: url, // Request address data: data, // Parameters responseType: 'blob' // Indicates the data type returned by the return server }) .then(response => { resolve(); let blob = new Blob([], {type: "application/-excel"}); let fileName = "Order List_"+(new Date())+".xls" ; if () { (blob, fileName); } else { var link = ('a'); = (blob); = fileName; (); (); } },err => { reject(err) }) }) } /** * Encapsulate patch request * @param url * @param data * @returns {Promise} */ export function patch(url,data = {}){ return new Promise((resolve,reject) => { (url,data) .then(response => { resolve(); },err => { reject(err) }) }) } /** * Encapsulate put request * @param url * @param data * @returns {Promise} */ export function put(url,data = {}){ return new Promise((resolve,reject) => { (url,data) .then(response => { resolve(); },err => { reject(err) }) }) }
Summarize
The above is the vue axios request interception introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!