一、 Promise 的了解
- Promise 是 JS 中进行异步编程的新解决方案
- promise 对象用来封装一个异步操作并能够获取其胜利/失败的后果值
- promise 有 3 种状态，pending、resolved、rejected
- promise 的状态扭转(只有 2 种, 只能扭转一次)，pending 变为 resolved， pending 变为 rejected
二、Promise 构造函数
/* Promise构造函数 */const PENDING = 'pending' // 初始未确定的状态const RESOLVED = 'resolved' // 胜利的状态const REJECTED = 'rejected' // 失败的状态function Promise(excutor) { const self = this // Promise的实例对象 self.status = PENDING // 状态属性, 初始值为pending, 代表初始未确定的状态 self.data = undefined // 用来存储后果数据的属性, 初始值为undefined self.callbacks = [] // {onResolved(){}, onRejected(){}} /* 将promise的状态改为胜利, 指定胜利的value */ function resolve(value) { // 如果以后不是pending, 间接完结 if (self.status !== PENDING) return self.status = RESOLVED // 将状态改为胜利 self.data = value // 保留胜利的value // 异步调用所有缓存的待执行胜利的回调函数 if (self.callbacks.length > 0) { // 启动一个延迟时间为0的定时器, 在定时器的回调中执行所有胜利的回调 setTimeout(() => { self.callbacks.forEach((cbsObj) => { cbsObj.onResolved(value) }) }) } } /* 将promise的状态改为失败, 指定失败的reason */ function reject(reason) { // 如果以后不是pending, 间接完结 if (self.status !== PENDING) return self.status = REJECTED // 将状态改为失败 self.data = reason // 保留reason数据 // 异步调用所有缓存的待执行失败的回调函数 if (self.callbacks.length > 0) { // 启动一个延迟时间为0的定时器, 在定时器的回调中执行所有失败的回调 setTimeout(() => { self.callbacks.forEach((cbsObj) => { cbsObj.onRejected(reason) }) }) } } // 调用excutor来启动异步工作 try { excutor(resolve, reject) } catch (error) { // 执行器执行出错, 以后promise变为失败 reject(error) }}
三、Promise.prototype.then 办法
/* 用来指定胜利/失败回调函数的办法 1). 如果以后promise是resolved, 异步执行胜利的回调函数onResolved 2). 如果以后promise是rejected, 异步执行胜利的回调函数onRejected 3). 如果以后promise是pending, 保留回调函数 返回一个新的promise对象 它的后果状态由onResolved或者onRejected执行的后果决定 2.1). 抛出error ==> 变为rejected, 后果值为error 2.2). 返回值不是promise ==> 变为resolved, 后果值为返回值 2.3). 返回值是promise ===> 由这个promise的决定新的promise的后果(胜利/失败) */Promise.prototype.then = function (onResolved, onRejected) { const self = this onResolved = typeof onResolved === 'function' ? onResolved : (value) => value // 将value向下传递 onRejected = typeof onRejected === 'function' ? onRejected : (reason) => { throw reason } // 将reason向下传递 return new Promise((resolve, reject) => { // 什么时候扭转它的状态 /* 1. 调用指定的回调函数 2. 依据回调执行后果来更新返回promise的状态 */ function handle(callback) { try { const result = callback(self.data) if (!(result instanceof Promise)) { // 2.2). 返回值不是promise ==> 变为resolved, 后果值为返回值 resolve(result) } else { // 2.3). 返回值是promise ===> 由这个promise的决定新的promise的后果(胜利/失败) result.then( (value) => resolve(value), (reason) => reject(reason) ) } } catch (error) { // 2.1). 抛出error ==> 变为rejected, 后果值为error reject(error) } } if (self.status === RESOLVED) { setTimeout(() => { handle(onResolved) }) } else if (self.status === REJECTED) { setTimeout(() => { handle(onRejected) }) } else { // PENDING self.callbacks.push({ onResolved(value) { handle(onResolved) }, onRejected(reason) { handle(onRejected) }, }) } })}
四、Promise.prototype.catch 办法
/* 用来指定失败回调函数的办法 能够应用then办法来简化catch办法*/Promise.prototype.catch = function (onRejected) { return this.then(undefined, onRejected)}
五、Promise.resolve 办法
/* 用来返回一个指定vlaue的胜利的promise value可能是一个个别的值, 也可能是promise对象 */Promise.resolve = function (value) { return new Promise((resolve, reject) => { // 如果value是一个promise, 最终返回的promise的后果由value决定 if (value instanceof Promise) { value.then(resolve, reject) } else { // value不是promise, 返回的是胜利的promise, 胜利的值就是value resolve(value) } })}
六、Promise.reject 办法
/* 用来返回一个指定reason的失败的promise */Promise.reject = function (reason) { return new Promise((resolve, reject) => { reject(reason) })}
七、Promise.all 办法
/* 返回一个promise, 只有当数组中所有promise都胜利才胜利, 否则失败 */Promise.all = function (promises) { return new Promise((resolve, reject) => { let resolvedCount = 0 // 曾经胜利的数量 const values = new Array(promises.length) // 用来保留胜利promise的value值 // 遍历所有promise, 取其对应的后果 promises.forEach((p, index) => { p.then( (value) => { resolvedCount++ values[index] = value if (resolvedCount === promises.length) { // 都胜利了，调用resolve把所有的后果带过来 resolve(values) } }, (reason) => reject(reason) // 失败了间接，调用reject ) }) })}
八、 Promise.race 办法
/* 返回一个promise, 由第一个实现promise决定 */Promise.race = function (promises) { return new Promise((resolve, reject) => { // 遍历所有promise, 取其对应的后果 promises.forEach((p) => { // 返回的promise由第一个实现p来决定其后果 p.then(resolve, reject) }) })}