axios 主动取消请求

axios 主动取消请求

已经发送的请求，在没有收到后台返回之前主动取消。这样的场景很常用。例如：一个支付组件，正在支付的时候用户立即又关闭了组件，这时应该立即取消支付请求。又或者tabs切换的时候，都是经常用到的。

这里我是用Typescript来封装的一个简单的axios请求做演示。

api.js

import axios, { CancelTokenStatic } from 'axios'
export default class PublicAPI {
  private baseURL: string = ''
  public cancelToken: CancelTokenStatic = axios.CancelToken
  private request = axios.create({
    baseURL: this.baseURL
  })

  public fetch(url: string, data?: any, baseURL?: string, option: object = {}): Promise<any> {
    const tempUrl: string = url
    url = baseURL ? `${baseURL}/${url}` : tempUrl
    return this.request.get(url, {
      params: data,
      ...option
    })
  }

  public post(url: string, params?: any, baseURL?: string, option: object = {}): Promise<any> {
    const tempUrl: string = url
    url = baseURL ? `${baseURL}/${url}` : tempUrl
    return this.request.post(url, params, { ...option })
  }
}

使用：*.vue

<template>
  <div id="axios-cancel-request">
    <v-button @click="fetchTodo" :loading="loading">开始请求</v-button>
  </div>
</template>

<script lang="ts">
import axios from 'axios'
import PublicAPI from '@/api'
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class AxiosCancelRequest extends Vue {
  private loading: boolean = false
  private cancelTodoRequest: Function | undefined
  private async fetchTodo() {
    // 我请求的接口是 >1s才返回结果，这里设置800ms的话就是请求不到东西
    setTimeout(() => {
      this.cancelReqTodo('取消请求')
    }, 800)
    let self = this
    this.loading = true
    const publicAPI = new PublicAPI()
    const result = await publicAPI.fetch('/todo', null, '', {
      // 传递一个cancelToken属性给axios，这也是axios为我们提供的方式
      cancelToken: new publicAPI.cancelToken(function executor(c) {
        // 将其回调保存，这样就保证取消这一个请求
        self.cancelTodoRequest = c
      })
    })
      .catch((error) => {
        console.log(error.message);
      })
    this.loading = false
    result && console.log(result);
  }

  private cancelReqTodo(message: string) {
    if (this.cancelTodoRequest) {
      this.cancelTodoRequest(message)
    }
  }

  public mounted() {

  }
}
</script>

axios还提供了静态的source方式取消全部请求
传送门