1. 使用 AbortController
AbortController
是 Web API
的一部分,可以用来中止一个或多个 fetch 请求虽然 Axios 默认 不支持
直接使用 AbortController,但你可以通过传递 AbortController 的 signal
属性到 Axios请求
中来实现这一功能 对于循环请求,你需要 为每个请求创建一个新的 AbortController 实例
,并在合适的时机调用 abort
方法。
const controller = new AbortController ( ) ;
const { signal } = controller;
axios. get ( '/your-endpoint' , { signal } ) . then ( response => {
} ) ;
controller. abort ( ) ;
实例:如果有相同请求,先中断前一个
const api = axios. create ( {
baseURL : import . meta. env. VITE_APP_API_BASEURL ,
timeout : 1000 * 60 ,
} )
const pendingMap = new Map ( )
function removePending ( config : AxiosRequestConfig) {
const key = ` ${ config. method} : ${ config. url} : ${ JSON . stringify ( filterNullUndefined ( config. params || config. data) ) } `
const abort = pendingMap. get ( key)
if ( abort) {
abort ( 'cancel' )
pendingMap. delete ( key)
}
}
api. interceptors. request. use (
( config ) => {
removePending ( config)
const abortController = new AbortController ( )
config. signal = abortController. signal
pendingMap. set (
` ${ config. method} : ${ config. url} : ${ JSON . stringify ( filterNullUndefined ( config. params || config. data) ) } ` ,
( ) => abortController. abort ( 'cancel' ) ,
)
return config
} ,
( error ) => {
return Promise. reject ( error)
} ,
)
2. 使用 Axios 的 CancelToken
Axios
提供了 CancelToken
功能,可以用来取消请求。你可以创建一个 CancelToken 实例
,并在请求中传递它对于循环请求,你同样需要 为每个请求创建一个新的 CancelToken 实例
,并保存每个请求的 取消函数
import axios from 'axios'
const CancelToken = axios. CancelToken
let cancel
axios. get ( '/your-endpoint' , {
cancelToken : new CancelToken ( ( c ) => {
cancel = c
} ) ,
} ) . then ( ( response ) => {
} )
cancel ( )
实例:离开页面前中断循环请求
const cancel = reactive< any> ( { } )
function singleChunk ( i : number) {
const dId = dataId. value
const p = ( ) => {
return new Promise ( ( resolve, reject ) => {
chunkDownload ( {
id : dId,
chunk : i + 1 ,
} , {
cancelToken : new CancelToken ( ( c ) => {
cancel[ i + 1 ] = c
} ) ,
} ) . then ( ( info ) => {
} )
. catch ( ( err ) => {
reject ( err)
} )
} )
}
return p
}
onBeforeUnmount ( ( ) => {
for ( const key in cancel) {
if ( typeof ( cancel[ key] === 'function' ) ) {
cancel[ key] ( )
}
}
} )