场景：如图，有时候前端请求后端同一接口，因接口响应速度过慢，或者接口返回顺序不同，导致前端原本页面显示a，结果显示b，像上图，前端页面看起来就是，显示顺序就会变成231，参数已经改变，最后的显示确还是第一次的值。
解决方法：
1，设置Loading遮罩，第一次请求未结束，就不让用户进行下一次请求。这也是常规解决办法。
有些场景是不可以进行loading设置的，如下图：
这是一个模糊搜索输入选择下拉框，点击弹窗会进行一次请求，加载下拉框的值，下拉框取消时也会重置加载一次下拉框，也会进行一次请求。
如果点击a弹窗 取消，发起了一次请求a1，然后再次去点b弹窗，发起了一次请求b1,a1请求这时候正好结束,导致b弹窗的下拉框的loading取消，并且赋予了a1请求回来的值。过了几秒后，b1请求也结束了，又显示了b1的值。导致页面看起来非常怪异，甚至最后显示的结果都不准确！
所以我们请求时，只保留最后一次请求就好了，这样既保证了结果的准确性，提高下页面性能
2.利用axios自带api取消接口请求
取消单个请求的示例：
import axios from "axios";
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
cancel = c;
})
});
cancel();//取消
我们在发送请求时，多传一个cancelToken，会返回一个函数c给我们，这个函数就是我们用作取消这次接口请求的
所以我们在请求接口时，把函数c，挂到axios上，方便我们拿到
每次发请求都都会先判断上一次是否有请求，有的话取消
main.js
import Vue from 'vue'
import axios from 'axios'
...
Vue.prototype.$axios= axios
...
vue中使用
<template>
...
</template>
<script>
import { apiData } from "@/api/api-xxx";
export default {
data(){
return {
cancel: null, //取消请求
}
},
methods:{
//请求
getApiData(){
//判断取消方式是否存在，存在说明在这之前已经发请了请求
if(typeof this.$axios.cancel === "function") {
this.$axios.cancel("取消本次请求");
};
//发起请求
this.$axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
this.$axios.cancel = c;
})
});
}
}
}
</script>
到了这里已经实现了需求，但是我们发现，取消请求后，会抛出一个错误，会触发api的interceptors.response拦截器的错误处理
import axios from "axios";
let api = axios.create({
...
});
api.interceptors.response.use(response => {},error=>{
//触发这个错误处理
})
export default api;
其中error并不是一个真正意义上的Error对象，他是一个axios生成的一个对象，本身也不是有code值这些，他的对象如下：
Cancel {message: undefined}
如果我们在cancel方法中传入一个值，那么undefined就是这个值了。
axios官方提供了一个判断方法 isCancel()用来判断这个错误是否是主动断开请求造成的
所以我们在axios响应拦截器中这么写
service.interceptors.response.use(
response => {
...
},
error => {
if(!axios.isCancel(error)){
...统一错误通知
}else{
return Promise.reject(error)
}
}
}
这样就完美解决了！
