如果用户在 5 秒之内再次点击按钮，就会执行abortController.abort()函数（5）。这样就会在刚才传给 calculate()的AbortSignal实例上触发 abort 事件（6）。
在 abort 事件处理器里面清除定时器（7），然后用一个适当的异常对象拒绝 Promise（8）。
根据 DOM 规范，这个异常对象必须是一个'AbortError' 类型的DOMException。
这个异常对象最终传给了catch (9) 和finally （10）。
但是还要考虑这样一种情况：
const abortController = new AbortController(); abortController.abort(); calculate( abortController.signal );
这种情况下 abort 事件不会触发，因为它在signal传给calculate() 函数前就执行了。为此我们需要改造下代码：
function calculate( abortSignal ) { return new Promise( ( resolve, reject ) => { const error = new DOMException( 'Calculation aborted by the user', 'AbortError' ); // 1 if ( abortSignal.aborted ) { // 2 return reject( error ); } const timeout = setTimeout( ()=> { resolve( 1 ); }, 5000 ); abortSignal.addEventListener( 'abort', () => { clearTimeout( timeout ); reject( error ); } ); } ); }
异常对象的定义移到了顶部（1），这样就可以在两个地方重用了。另外，多了个条件判断abortSignal.aborted（2）。如果它的值是true，calculate()函数应该立即拒绝 Promise，没必要再往下执行了。
到这里我们就实现了一个完整的可取消的异步函数，以后碰到需要处理异步任务的地方就可以派上用场了。
到此这篇关于如何优雅地取消 JavaScript 异步任务的文章就介绍到这了,更多相关JavaScript 取消异步任务内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: