axios取消重复请求

最新推荐文章于 2023-11-16 22:35:00 发布

usernamehh

最新推荐文章于 2023-11-16 22:35:00 发布

阅读量140

点赞数

分类专栏： vue 文章标签：前端

本文链接：https://blog.csdn.net/usernamehh/article/details/125769552

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CancelToken在axios中取消重复的HTTP请求，以防止不必要的资源消耗和请求间的干扰。通过创建一个httpRequest类，实现了在请求拦截器中保存并管理请求，当检测到重复请求时，取消先前的请求，确保每次只有一个请求在进行。

摘要由CSDN通过智能技术生成

遇到问题：

1.多次重复请求浪费资源

2.切换标签之前未完成的请求或许会影响当前标签内容

取消重复请求:

保存一个请求的对象，重复url直接CancelToken

class httpRequest {
  constructor() {
    this.pending = {}
  }

  interceptors(instance, url) {
    instance.interceptors.request.use(
      config => {
        const key = config.baseURL + config.url + '&' + config.method
        config.cancelToken = new Axios.CancelToken((cancel) => {
          this.pending[key] = cancel
        })
        this.handlePending(key, true)
        return config
      },
    )
    instance.interceptors.response.use(
      res => {
        const key = res.config.url + '&' + res.config.method
        this.handlePending(key)
        return res
      }
    )
  }

  handlePending(key, isRequest = false) {
    if (this.pending[key] && isRequest) {
      this.pending[key]('cancel repeat')
    }
    if (this.pending[key]) {
      delete this.pending[key]
    }
  }
}

export default httpRequest