axios拦截器

XHR

（1）xhr是XMLHttpRequest的简写
（2）xhr是一组API函数集，可被JavaScript、JScript、VBScript以及其他web浏览器内嵌的脚本语言调用，通过HTTP在浏览器和web服务器之间收发XML数据或者其他数据。最大的好处就是动态刷新网页。
（3）xhr中的get、post请求

// 创建XHR
let xhr = new XMLHttpRequest();
// 利用open方法将API接口引过来，建立连接
xhr.open('GET', 'http://xxxxx', true)
三个参数分别为：method、url、async是否异步（true或者默认都是异步）
// 利用send发送Ajax请求
xhr.send('id=2')
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// open异步为true，异步就需要
// onreadystatechange=function() {}
xmlhttp.onreadystatechange=function(){
	if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
		// 其他操作
	}
}
// readyState（状态值）和status（状态码）
// rs是标识运行xhr过程中的几种状态：
// 0 未初始化（创建xhr对象） 1 （载入）准备发送状态（调用open） 2 （载入成功）已经发送状态 （调用send）3 （解析）正在接受状态 （已经接受HTTP响应头信息，但是具体信息没有接收完） 4 （完成）读取HTTP响应的接收

// status(状态码)
// HTTP响应码
// 1XX 服务器收到请求，需要继续处理。
// 2XX 请求成功
// 3XX 重定向
// 4XX 客户端错误
// 5XX 服务器错误

Ajax

ajax就是基于浏览器提供的XMLHttpRequest对象来实现的，对xhr的封装
$.ajax({
url: ‘01time1.php’,
type: ‘get’,
dataType: ‘json’, // 用于设置响应体的类型 注意 跟 data 参数没关系！！！,
beforeSend: function (xhr) {
// 在所有发送请求的操作（open, send）之前执行
console.log(‘beforeSend’, xhr);
},
success: function (res) {
// 只有请求成功（状态码为200）才会执行这个函数
console.log(res);
},
error: function (xhr) {
// 只有请求不正常（状态码不为200）才会执行
console.log(‘error’, xhr);
},
complete: function (xhr) {
// 不管是成功还是失败都是完成，都会执行这个 complete 函数(一般成功与失败都需要执行的操作写在这里)
console.log(‘complete’, xhr);
}
})；
ajax参数介绍：
https://www.cnblogs.com/difs/p/9493414.html

axios和axios拦截器

axios

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中；是请求资源的模块；通过promise对ajax的封装。
　　属性：url、method、data、responseType、.then、.catch…

// 第一种方式  将参数直接写在url中
axios.get('/getMainInfo?id=123')
.then((res) => {
  console.log(res)
})
.catch((err) => {
  console.log(err)
})
// 第二种方式  将参数直接写在params中
axios.get('/getMainInfo', {
  params: {
    id: 123
  }
})
.then((res) => {
  console.log(res)
})
.catch((err) => {
  console.log(err)
})
//  执行post请求，注意执行post请求的入参，不需要写在params字段中，这个地方要注意与get请求的第二种方式进行区别。
axios.post('/getMainInfo', {
  id: 123
})
.then((res) => {
  console.log(res)
})
.catch((err) => {
  console.log(err)
})

axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样。
简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有。
总结一句话就是axios是ajax，ajax不止axios。

axios拦截器

⼀般在使⽤axios时，会⽤到拦截器的功能，⼀般分为两种：请求拦截器、响应拦截器。
1.请求拦截器 在请求发送前进⾏必要操作处理，例如添加统⼀cookie、请求体加验证、设置请求头等，相当于是对每个接⼝⾥相同操作的⼀个封装；

2.响应拦截器，同理，响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的⼀些处理，通常是数据统⼀处理等，也常来判断登录失效等。

import axios from 'axios'

// 添加请求拦截器，在请求头中加token,Cookie
axios.interceptors.request.use(
  config => {
    if (localStorage.getItem('Authorization')) {
      config.headers.Authorization = localStorage.getItem('Authorization');
    }
    if (localStorage.getItem('Cookies')) {
      config.headers.Cookies = localStorage.getItem('Cookies');
    }
    return config;
  }, error => {
    return Promise.reject(error);
  });

// 这里拦截401错误，并重新跳入登页重新获取token
axios.interceptors.response.use(
  response => {
    console.log("response.use" + response)
    if (response.data.data && response.data.data.ecode == '401') {
      localStorage.removeItem('Authorization');
      localStorage.removeItem('Cookie');
      this.$router.push('/login');
    } else {
      return response;
    }
  }, error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          localStorage.removeItem('Authorization');
          localStorage.removeItem('Cookie');
          this.$router.push('/login');
      }
    }
    return Promise.reject(error.response.data)
  }
);