[TOC] # Promise 取消 ~~~ const startButton = document.querySelector('#start'); const cancelButton = document.querySelector('#cancel'); startButton.addEventListener("click", () => cancellableDelayedResolve(1000)); class CancelToken { constructor(cancelFn) { this.promise = new Promise((resolve, reject) => { cancelFn(() => { setTimeout(console.log, 0, "delay cancelled"); resolve('cancel'); }); }); } } function cancellableDelayedResolve(delay) { // setTimeout(console.log, 0, "set delay"); return new Promise((resolve, reject) => { const id = setTimeout((() => { // setTimeout(console.log, 3000, "delayed resolve"); resolve(); }), delay); const cancelToken = new CancelToken((cancelCallback) => { return cancelButton.addEventListener("click", cancelCallback) }); cancelToken.promise.then((data) => { clearTimeout(id) console.log(data, '取消成功') }); }); } ~~~ # Promise 進度通知 ~~~ class TrackablePromise extends Promise { constructor(executor) { const notifyHandlers = []; super((resolve, reject) => { return executor(resolve, reject, (status) => { notifyHandlers.map((handler) => handler(status)); }); }); this.notifyHandlers = notifyHandlers; } notify(notifyHandler) { this.notifyHandlers.push(notifyHandler); return this; } } let p = new TrackablePromise((resolve, reject, notify) => { function countdown(x) { if (x > 0) { notify(`${20 * x}% remaining`); setTimeout(() => countdown(x - 1), 1000); } else { resolve(); } } countdown(5); }); p.notify((x) => setTimeout(console.log, 0, 'progress:', x)); p.then(() => setTimeout(console.log, 0, 'completed')); ~~~ # 職責鏈模式 ~~~ /** * 處理節點 已經下架 */ function checkProductSuccess(status){ if (status === 1) { return '正常商品' } return 'next' } /** * 處理節點 已經售罄 */ function checkProductSellOut(status){ if (status === 2) { return '商品已售罄' } return 'next' } /** * 處理節點 商品庫存不足 */ function checkProductNotEnough(status){ if (status === 3) { return '商品庫存不足' } return 'next' } class Chain { handler: Function | null = null nextChain!: Chain constructor(handler: Function){ this.handler = handler; } setNextChain(nextChain: Chain){ this.nextChain = nextChain; } handleRequest(){ let result = this.handler?.apply(this, arguments) console.log(result, 'result') if( result === 'next' ){ this.nextChain && this.nextChain.handleRequest.apply(this.nextChain, arguments) } } } // 實例化處理函數為責任鏈節點 const checkProductOffshelvesChain = new Chain(checkProductOffshelves) const checkProductSellOutChin = new Chain(checkProductSellOut) const checkProductNotEnoughChain = new Chain(checkProductNotEnough) const checkProductSuccessChain = new Chain(checkProductSuccess) // 串聯節點 checkProductOffshelvesChain.setNextChain(checkProductSellOutChin) checkProductSellOutChin.setNextChain(checkProductNotEnoughChain) checkProductNotEnoughChain.setNextChain(checkProductSuccessChain) // 開始派發任務 checkProductOffshelvesChain.handleRequest(1) ~~~ # Promise鏈式調用 [參考](https://blog.csdn.net/yyk5928/article/details/103624315) ~~~ let a = function() { return new Promise((resolve, reject) => { setTimeout(()=>{ console.log('11111111111',) resolve('第一個異步進程') },3000) }) } let b = function(){ return new Promise((resolve, reject) => { setTimeout(()=>{ console.log('2222222222' ) resolve('第二個異步進程') },2000) }) } let c = function(){ return new Promise((resolve, reject) => { setTimeout(()=>{ console.log('3333333333333') resolve('第三個異步進程') },1000) }) let promiseArr = [a, b, c] promiseArr.reduce((prev, cur)=>{ return prev.then(() => { return cur().then(res => { console.log( res) }) }) }, Promise.resolve()) ~~~