axios 如何用拦截器，只保留某个接口最新的一次请求

Question

有这个一个使用场景，一个筛选页面，用户可以快速点击筛选条件，筛选条件一变，马上请求数据api,但是接口远在国外，可以理解为请求非常耗时，所以这个接口，经常会同时会有好几个请求在处理,然后页面数据会闪。

所以我想，对于同一个url，所有请求只留最新，旧的请求无论是成功还是padding状态，都放弃，网上查好多文章都只是说取消重复请求问题，跟我想要的有点区别，加上对前端不熟悉（本菜是后台，首次写前端项目），想好久未能想明白，故此劳烦各位大佬，为小弟指点一二，不胜感激！

现在已有拦截器如下（已删除无关代码）

import axios from 'axios'
const service = axios.create({
    baseURL: 'a.com',
})
service.interceptors.request.use(config => {
    return config
}, error => {
    console.log(error)
    Promise.reject(error)
})
service.interceptors.response.use(
    response => response,
    error => {
        console.log('err' + error)
        return Promise.reject(error)
    })

export default service

Answer 1

你还需要axios的中断请求, cancelToken。

进入页面后先执行：

this.source = this.$axios.CancelToken.source();

每个axios请求都记得带上参数：

cancelToken: this.source.token

离开页面或者按你目前的需求，每次发请求都中断旧的请求：

this.source.cancel('Operation canceled by the user.');

参考：请搜索Cancellation