axios多次重复请求，只保留最后一次请求解决办法

场景

场景：如图，有时候前端请求后端同一接口，因接口响应速度过慢，或者接口返回顺序不同，导致前端原本页面显示a，结果显示b，像上图，前端页面看起来就是，显示顺序就会变成231，参数已经改变，最后的显示确还是第一次的值。

解决方法：

1，设置Loading遮罩，第一次请求未结束，就不让用户进行下一次请求。这也是常规解决办法。
有些场景是不可以进行loading设置的，如下图：

特殊场景.gif

这是一个模糊搜索输入选择下拉框，点击弹窗会进行一次请求，加载下拉框的值，下拉框取消时也会重置加载一次下拉框，也会进行一次请求。
如果点击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)
}

}
}

这样就完美解决了！