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方式取消全部请求
传送门