vue关于axios 拦截器的使用

背景

　在实际开发中，请求是多种多样的，花里胡哨的。比如：携带tocken、权限管理、状态码错误处理。

部分转载：https://www.jianshu.com/p/8bc48f8fde75

首先啥是Promise

Promise主要用于解决异步回调嵌套的问题。
当多个ajax请求之间存在依赖关系，也就是说一个请求必须使用另一个请求返回的结果时，需要将这个请求嵌套在另一个请求的回调函数上，才能使用另一个请求的结果来发送这个请求。
Promise的思路是将异步请求作为一个对象，将执行成功和失败作为这个对象的方法，执行成功的时候将结果放到这个对象的then方法中处理后续的逻辑，失败调用catch方法。这样调用它就避免了回调函数的嵌套。
使用场景: 主要用于保证多个异步请求都完成以后，再进行后续的业务。

resolve 成功状态
reject 拒绝状态
then 是前面返回promise的处理

Promise的相关概念

es6新语法 用来处理异步编程
promise是一个对象 可以获取异步操作的消息

可以避免多层异步调用嵌套的问题(回调地狱)
提供了简洁的API 使得控制异步操作更加容易
基于promise发送ajax请求

Promise常用的API

1.实例方法
.then() 得到异步任务的正确结果
.catch() 得到异常信息
.finally() 成功与否都会执行

2.对象方法
Promise.all() 并发处理多个异步任务 所有任务都执行完成才能得到结果
Promise.race() 并发处理多个异步任务 只要有一个任务完成就能得到结果

原文链接：https://blog.csdn.net/qq_44905636/article/details/105496073

啥是axios?

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

传统的ajax不香吗？

传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。
JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持。经过多年的更新维护，真的已经是非常的方便了，优点无需多言；如果是硬要举出几个缺点，那可能只有：
1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮
2.基于原生的XHR开发，XHR本身的架构不清晰。
3.JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
4.不符合关注分离（Separation of Concerns）的原则
5.配置和调用方式非常混乱，而且基于事件的异步模型不友好。

axios 拦截器

在created()生命周期中使用他：

created(){
    
axios.interceptors.request.use((config)=>{
//请求拦截
  this.loading = true;
  return config;
})

axios.interceptors.response.use((config)=>{
//响应拦截
this.loading = false;
return config;

})

}// loading 表示加载中