如何取消异步操作

[yaofly2012]

1. Promise
2. fetch
3. ajax
   本身支持，即XMLHttpRequest.abort()

rxjs ?

参考

掘金 如何优雅地取消 JavaScript 异步任务？
MDN AbortSignal

[yaofly2012]

取消fetch

基础-DOM标准

1. AbortSignal
   中断信号，可以和Web端的网络请求通讯，fetch内部会监听AbortSignal的abort事件。
2. AbortController
AbortSignal的操作接口。

如何取消fetch

1. 创建AbortController对象abortController；
2. 将abortController.signal属性，传给fetch函数；
3. 当abortController.signal变成aborted时，fetch函数会内部执行reject。
   reject的reason是个DOMException:

DOMException: The user aborted a request.

var abortController = new AbortController();

fetch('https://example.com', { signal: abortController.signal })
.then(() => {})
.catch(reason => {})

参考

1. [译] 如何取消你的 Promise？
2. How to cancel a promise in javascript ?

[yaofly2012]

取消Promise

EcmaScript标准还没取消Promise的规范，但是在Web端可以利用AbortSignal取消Promise。

利用AbortSignal

whatwg规范里描述了如何取消异步操作：

• Accept AbortSignal objects through a signal dictionary member.
• Convey that the operation got aborted by rejecting the promise with an "AbortError" DOMException.
• Reject immediately if the AbortSignal's aborted flag is already set, otherwise:
• Use the abort algorithms mechanism to observe changes to the AbortSignal object and do so in a manner that does not lead to clashes with other observers.

参照这个流程，写个可中断的Promise：

// 生成可中断的Promise
function cancelablePromise(cb, signal) {
    return new Promise((resolve, reject) => {
        
        function rejectByUser() {
            reject(new DOMException('The user aborted a promise', 'AbortError'));
        }
        
        if(signal instanceof AbortSignal) {
            // If options’ signal’s aborted flag is set, then reject p with an "AbortError" DOMException and return p.
            if(signal.aborted) {
                rejectByUser();
                return; // Return immediately, stop doing amazing things (cb).
            }

            // 监听abort事件
            signal.addEventListener('abort', rejectByUser);                      
        }
        // 
        cb(resolve, reject);
    })
}

;(() => {
    var abortController = new AbortController();
    abortController.signal.onabort = (e) => {
        console.log('aborted', e);
    }
    //abortController.abort();
    $("#start").onclick = async () => {
       try {
            await cancelablePromise((resolve, reject) => {
                setTimeout(() => {
                    resolve()
                }, 15000)
            }, abortController.signal)
            console.log('Action done')
       } catch(e) {
            debugger
            console.error(e)
       }
    }

    $("#abort").onclick = () => {
        abortController.abort();
    }

})()

注意：

1. 如果AbortSignal已经处于aborted，则立马调用reject，不再执行异步操作；
2. reject的reason是个DOMException对象，且名字为AbortError；
3. fetch内部估计也是采用类似流程。

利用Promise.race

如果不支持AbortSignal或者在nodejs环境，可以利用Promise.race

function cancelablePromise(promise) {
    var rejectHandle;
    var cancelablePromise= new Promise((resolve, reject) => {
        rejectHandle = () => {
            reject(new TypeError('Canceled by user'))
        };
    })

    var r = Promise.race([cancelablePromise, promise]);
    r.cancel = rejectHandle;
    return r;
}

利用Promise.then链

本质是Promise.race的另一种写法：

function cancelablePromise(promise) {
    var rejectHandle;
    var r = new Promise((resolve, reject) => {         
        rejectHandle = () => {
            reject(new TypeError('Canceled by user'))
        }          
        promise.then(resolve, reject);
    })
    r.cancel = rejectHandle;
    return r;
}

参考

1. 如何优雅地取消 JavaScript 异步任务？
2. whatwg: Using AbortController and AbortSignal objects in APIs
3. cancelPromise