Vue axios拦截器使用

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端.这篇文章主要介绍了vue/axios请求拦截的相关知识,需要的朋友可以参考下

axios使用拦截器
在请求或响应被 then 或 catch 处理前拦截它们。

http request拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

http respones拦截器
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

移除拦截器
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

为自定义axios实例添加拦截器
var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
--------------------- 

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

下面代码给大家介绍vue axios 请求拦截，具体代码如下所示：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143

import axios from 'axios';//引入axios依赖 import { Message } from 'element-ui'; import Cookies from 'js-cookie'; //引入cookie操作依赖 import router from '@/router/index'//引入路由对象 axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request 封装请求头拦截器 axios.interceptors.request.use(   config => {     var token = ''     if(typeof Cookies.get('user') === 'undefined'){       //此时为空     }else {       token = JSON.parse(Cookies.get('user')).token     }//注意使用的时候需要引入cookie方法，推荐js-cookie     config.data = JSON.stringify(config.data);     config.headers = {       'Content-Type':'application/json'     }     if(token != ''){      config.headers.token = token;     }     return config;   },   error => {     return Promise.reject(err);   } ); //http response 封装后台返回拦截器 axios.interceptors.response.use(   response => {     //当返回信息为未登录或者登录失效的时候重定向为登录页面     if(response.data.code == 'W_100004' || response.data.message == '用户未登录或登录超时，请登录！'){       router.push({         path:"/",         querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转       })     }     return response;   },   error => {     return Promise.reject(error)   } ) /**  * 封装get方法  * @param url  * @param data  * @returns {Promise}  */ export function fetch(url,params={}){   return new Promise((resolve,reject) => {     axios.get(url,{       params:params     })       .then(response => {         resolve(response.data);       })       .catch(err => {         reject(err)       })   }) } /**  * 封装post请求  * @param url  * @param data  * @returns {Promise}  */ export function post(url,data = {}){   return new Promise((resolve,reject) => {     axios.post(url,data)       .then(response => {         resolve(response.data);       },err => {         reject(err)       })   }) } /**  * 封装导出Excal文件请求  * @param url  * @param data  * @returns {Promise}  */ export function exportExcel(url,data = {}){   return new Promise((resolve,reject) => {     axios({       method: 'post',       url: url, // 请求地址       data: data, // 参数       responseType: 'blob' // 表明返回服务器返回的数据类型     })     .then(response => {       resolve(response.data);       let blob = new Blob([response.data], {type: "application/vnd.ms-excel"});       let fileName = "订单列表_"+Date.parse(new Date())+".xls" ;       if (window.navigator.msSaveOrOpenBlob) {         navigator.msSaveBlob(blob, fileName);       } else {         var link = document.createElement('a');         link.href = window.URL.createObjectURL(blob);         link.download = fileName;         link.click();         window.URL.revokeObjectURL(link.href);       }     },err => {       reject(err)     })   }) } /**  * 封装patch请求  * @param url  * @param data  * @returns {Promise}  */ export function patch(url,data = {}){   return new Promise((resolve,reject) => {     axios.patch(url,data)       .then(response => {         resolve(response.data);       },err => {         reject(err)       })   }) } /**  * 封装put请求  * @param url  * @param data  * @returns {Promise}  */ export function put(url,data = {}){   return new Promise((resolve,reject) => {     axios.put(url,data)       .then(response => {         resolve(response.data);       },err => {         reject(err)       })   }) }     原文http://www.php.cn/js-tutorial-393682.html