Axios 取消请求

我不是女神ヾ 2022-11-16 15:14 232阅读 0赞

## 应用场景 ##

取消请求偶尔会用到，以下是两个工作中可能用到的场景

1.  如果一个数据请求量比较大（可能会请求错误），还没请求完就切换路由，可能会出现错误的提示框（响应拦截器中配置错误提示）
2.  导出文件或下载文件时，中途取消
3.  一个请求请求量比较大，发送新请求时需要取消上一个请求

## 取消单个请求（结合生命周期使用） ##

*  页面销毁时取消请求
 *  重复发送请求取消上一次请求

import axios from 'axios'
    import {  generatePlan } from '@/api'
    
    export default { 
      destroyed() { 
        this.cancelPost()
      },
      methods: { 
        generateList() { 
          this.$confirm('生成时间比较长，您是否确定生成？', '警告', { 
            confirmButtonText: '确定',
            cancaelButtonText: '取消',
          })
            .then(() => { 
              const self = this
              this.cancelPost()
              // post请求
              return generatePlan({ 
                params: this.listQuery,
                cancelToken: new axios.CancelToken(function exector(c) { 
                  self.$cancel = c
                }),
              }).then(res => { 
                if (res.code === 200) this.list = res.data.result
              })
            })
            .catch(() => { })
        },
      },
      cancelPost() { 
        typeof this.$cancel === 'function' ? this.$cancel('取消请求') : null
      },
    }

## 取消所有请求（结合导航守卫） ##

思路：在请求拦截器中，给所有请求加一个 token，设置全局变量 source 控制 cancel token，在路由变化时调用 cancel 方法

http.interceptors.request.use(
      config => { 
        config.cancelToken = store.source.token
        return config
      },
      error => { 
        return Promise.reject(error)
      }
    )
    
    router.beforeEach((to, from, next) => { 
      const CancelToken = axios.CancelToken
      store.source.cancel && store.source.cancel()
      store.source = CancelToken.source()
      next()
    })

## axios 取消请求原理 ##

axios 是对 XMLHttpRequest 的封装，使用 XMLHttpRequest 实例的 abort()方法

// https://github.com/axios/axios/blob/master/lib/adapters/xhr.js
    if (config.cancelToken) { 
      // Handle cancellation
      config.cancelToken.promise.then(function onCanceled(cancel) { 
        if (!request) { 
          return
        }
    
        request.abort()
        reject(cancel)
        // Clean up request
        request = null
      })
    }