[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()) ~~~