Axios取消请求(AbortController)

BIUBIUUP

已于 2023-03-02 19:12:40 修改

阅读量2.6k

点赞数 2

分类专栏： Vue 文章标签：前端 javascript 开发语言

于 2023-02-16 21:39:45 首次发布

本文链接：https://blog.csdn.net/zhzs123/article/details/129072178

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

从v0.22.0版本开始，Axios支持使用AbortController来取消请求。在封装后的axios服务中，正确传递signal参数是关键。例如，在get和post请求中，signal应嵌入到配置对象中。同时，如果多个接口共用同一个AbortController，取消一个请求会同时影响其他请求。因此，确保每个请求有独立的AbortController以避免不必要的干扰。

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

Axios取消请求(AbortController)

从 v0.22.0 开始，Axios 支持以 fetch API 方式—— AbortController 取消请求：

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

注意: CancelToken 从从 v0.22.0 开始已被弃用，不应在新项目中使用。

我们一般在项目中会把 axios 进行二次封装,封装之后如何传递 signal 需要注意下

/**

 \* @description: 获取查看时间

 \* @param {*} formData

 \* @return {*}

 */

$api.getCheckTime = (formData, signal) => {

 let url = `/xxxxx`

 return  $http.get(url, { params: formData, signal },)

}

// 在组件中调用该接口

 /**
   * @description: 获取查看时间
   * @return {*}
   */
  async getTime(uid) {
      
      if (this.abortController) {
          // 如果存在abortController,就取消掉上次的请求,注意不同接口如果使用同一个abortController,则会被abort() 一起取消掉
          this.abortController.abort()
          this.abortController = ""
      } else {
          this.abortController = new AbortController()
      }
      this.abortController = new AbortController()
      let res = await $api.getCheckTime({ card_id: this.cardId, uid }, this.abortController.signal);
  }

如果接口为 post 请求, signal 参数的传递应该为:

axios.post('demo/url', {
    id: 123,
    name: 'Henry',
    signal,
},{
   timeout: 1000,
    ...//其他相关配置
})
    // 如果是二次封装的axios,那可能是:
$http.post(url, {
    id: 123,
    name: 'Henry',
    signal,
})

要谨记Axios不同请求方式传参的方式,本人就是因为没搞清Axios的传值方式,没有成功的将signal传递给Axios,走了很多弯路😭