API

最近项目中遇到一个场景当连续触发一个请求时如果是同一个接口则保留最后一次的请求之前的请求取消。

查阅了下axios文档有一个属性CancelToken把这个添加到axios配置中

request:

${config.method}${config.url}if

(config.autoCancel)

{removeCache(cacheKey)}config.cancelToken

new

${res.config.method}${res.config.url}if

res},(error:

这里的autoCancel是为了解决url相同请求参数不同时自定义添加的具体请求方式可以根据这个值来决定是否开启cancelToken

全部代码

${config.method}${config.url}if

(config.autoCancel)

{removeCache(cacheKey)}config.cancelToken

new

Promise.reject(error),],response:

[(res:

${res.config.method}${res.config.url}if

res},(error:

cancelInterceptors在封装的axios里面添加配置

往request请求中添加配置

service.interceptors.request.use(...cancelInterceptors.request)//

往response请求中添加配置

service.interceptors.response.use(...cancelInterceptors.response)

在response失败error中axios返回了一个失败状态axios.isCancel(error)

(error:

{message.error(error.response?.statusText

error.message

cancellationconfig.cancelToken.promise.then(function

onCanceled(cancel)

{return;}request.abort();reject(cancel);//

Clean

fileaxios/lib/cancel/CancelToken.js

var

Cancel(message);resolvePromise(token.reason);});

2取消请求

在axios/lib/adapters/xhr.js文件中取消request.abort();请求

(config.cancelToken)

cancellationconfig.cancelToken.promise.then(function

onCanceled(cancel)

{return;}request.abort();reject(cancel);//

Clean