这次终于明白了axios是如何中断请求的if(axios.isCancel(thrown)){console.log('Requestcanceled',thrown.message);}else{//处理错误}});axios.post('/user/12345',{name:'newname'},{cancelToken:source.token})//取消请求(message参数可选)source.cancel('操作被用户取消.');通过CancelToken构造函数取消constCancelToken=axios.CancelToken;letcancel;axios.get('/user/12345',{cancelToken:newCancelToken(functionexecutor(c){//一个执行器函数接收一个取消函数作为参数取消=c;})});//取消requestcancel();被AbortControllerRequest打断,这是fetch的api,本文不做详细介绍,具体用法参考https://developer.mozilla.org...constcontroller=newAbortController();axios.get('/foo/bar',{signal:controller.signal}).then(function(response){//...});//取消requestcontroller.abort()源码分析首先需要从GitHub上下载Axios源码。如果不想下载,也可以打开https://github1s.com/axios/ax...查看。FactoryfunctionCancelToken.source通过前面两个例子我们可以知道,取消请求与CancelToken类是息息相关的。CancelToken.source()工厂函数只是帮助我们在我们不可见的内部实例化一个CancelToken的实例。那我们先看看工厂函数的实现。//文件路径Axios/lib/cancel/CancelToken.js//.../***返回一个对象,该对象包含一个新的`CancelToken`和一个函数,该函数在调用时*取消`CancelToken`。*/CancelToken.source=functionsource(){varcancel;vartoken=newCancelToken(functionexecutor(c){cancel=c;});返回{令牌:令牌,取消:取消};};module.exports=CancelToken;ok看到工厂函数CancelToken.source帮我们实例化了一个CancelToken的实例,然后返回我们需要使用的实例(token)和取消请求的函数(cancel)。接下来我们深入到CancelToken的内部,看看为什么执行完cancel函数后请求中断了。CancelToken类//文件路径Axios/lib/cancel/CancelToken.js//.../***`CancelToken`是一个可用于请求取消操作的对象。**@class*@param{Function}executor执行器函数。*/functionCancelToken(executor){if(typeofexecutor!=='function'){thrownewTypeError('executor必须是一个函数。');}varresolvePromise;this.promise=newPromise(functionpromiseExecutor(resolve){resolvePromise=resolve;});var令牌=这个;//eslint-disable-next-linefunc-namesthis.promise.then(function(cancel){if(!token._listeners)return;vari;varl=token._listeners.length;for(i=0;i
