ajax能拿到401axios无法拿到,vue中axios请求拦截器和响应拦截器 以及401状态处理

一、axios

在vue中啊 我们不需要去用原生XHR去发 ajax ，因为啊 原生js写起来比较繁琐，并不易我们去开发，   我们可以通过axios 去发ajax？看到axios不要觉得新词就很陌生

官网： axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：

从浏览器中创建 XMLHttpRequests

从 node.js 创建 http 请求

支持 Promise API

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换 JSON 数据

客户端支持防御 XSRF

复习 axios二次封装 跳转链接

二、请求拦截器

// 添加请求拦截器

axios.interceptors.request.use(function (config) {

// 在发送请求之前做些什么

return config;

}, function (error) {

// 对请求错误做些什么

return Promise.reject(error);

});

先知道请求拦截器啊并不是说对请求进行了拦截不让去请求 ，其实目的是在发送请求前进行操作，比如啊 我们在请求头添加token，我们在请求拦截器中添加啊，所有的请求都会经过请求拦截器，是不是不用我们手动挨个去加了，这也是最常用的使用场景了

// 请求拦截器1

instance.interceptors.request.use(function (config) {

config.header.xxxx1 = 1000

return config

}, function (error) {

// 对请求错误做些什么

return Promise.reject(error)

})

// 请求拦截器2

instance.interceptors.request.use(function (config) {

config.header.xxxx2 = 'abc'

return config

}, function (error) {

// 对请求错误做些什么

return Promise.reject(error)

})

发送请求中 请求头中除了添加token 也可以添加其他的 上面的代码只是例子，添加后并无作用

案例 请求头(headers)中携带t