<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>promise A+ 规范</title> </head> <body> <script> let concept = `1：每个异步操作都看作一个任务，任务都有两个阶段和三个状态，分别是 settled 已决阶段 和 unsettled 未决阶段，分别是 pending 等待态 fulfilled 成功态 rejected 失败态 2：状态之间不可逆转，只能由 pending 态转 fulfilled态 或者 pending转 rejected态； 3：任务由未决状态转已决状态，其中由pending态转fulfilled态的动作称之为 resolve，由pending态转rejected态的动作称之为 rejected态； 4：任务都提供一个then方法，这个方法有两个回调参数，分别是 onFulfilled onRejected`; const PENDING = 'pending'; const FULFILLED = 'fulfilled'; const REJECTED = 'rejected'; class myPromise { constructor(executor) { this.status = PENDING; this.data = null; this.reason = null; this.dispatchers = []; try { executor(this.__resolve.bind(this), this.__reject.bind(this)); } catch (err) { this.__reject(err); } } __resolve(data) { if (this.status !== PENDING) return; this.status = FULFILLED; this.data = data; this.__dispatchers(); } __reject(reason) { if (this.status !== PENDING) return; this.status = REJECTED; this.reason = reason; this.__dispatchers(); } __dispatchers() { if (this.status === PENDING) return; for (const dispatcherConf of this.dispatchers) { this.__dispatcher(dispatcherConf); } } __dispatcher({ status, dispatcher, resolve, reject }) { if (this.status !== status) return; if (typeof dispatcher !== 'function') { this.status === FULFILLED ? resolve(this.data) : reject(this.data); return; } try { const result = dispatcher(this.status === FULFILLED ? this.data : this.reason); resolve(result); } catch (err) { reject(err); } } then(onFulfilled, onRejected) { return new myPromise((resolve, reject) => { this.dispatchers.push( { status: FULFILLED, dispatcher: onFulfilled, resolve, reject }, { status: REJECTED, dispatcher: onRejected, resolve, reject } ); this.__dispatchers(); }); } catch(err) { this.then(null, err); } } const myPro = new myPromise((resolve, reject) => { setTimeout(function () { resolve(1); }, 2000); }); myPro.then(r => { console.log(r); }); </script> </body> </html>