前言
1、Promise 的意义?
在javascript的世界中,所有代码都是单线程执行的,由于这个“缺陷”,导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行。Ajax可以解决这个问题,但是并不好复用。JQuery的链式调用同样可以解决,每次调用都会返回一个JQuery对象。为了更好的处理Promise 出现了,并且ECMAScript 对其进行了规范。
2、PromiseA+规范是什么?
其实 Promise 规范有很多,如 Promise/A,Promise/B,Promise/D 以及 Promise/A 的升级版 Promise/A+。ES6 (也叫ES2015)中采用了 Promise/A+ 规范。
一、术语
1. promise 有 then 方法的对象或者函数;
2. thenable 是一个有 then 方法的对象或者是函数;
3. value promise 状态成功时的值, resolve(value),可以是任何数据类型(String Number Boolean undefined thenable promise);
4. reason promise 状态失败时的值, reject(reason);
二、Promise Status(三种状态及其关系)
1. pending
1.1 初始状态,可以改变.
1.2 在 resolve 和 reject 之前都处于这个状态.
1.3 通过resolve --> fulfilled 状态.
1.4 通过reject --> rejected 状态.
2. fulfilled
2.1 最终态,不可改变.
2.2 一个 promise 被 resolve 改变成这个状态.
2.3 必须通过一个 value 值,成功以后的值.
3. rejected
3.1 最终态,不可改变;
3.2 一个promise 被 reject 改变成这个状态;
3.3 必须拥有一个 reason ,也就是失败的原因;
总结:
pending --> resolve(value) --> fulfilled
pending --> reject(reason) --> rejected
三、Promise then 方法 及其返回值
promise 应该(promiseA+规范,规范提出了,所以用的应该)提供一个 then 方法, 用来访问最终结果, 无论 value 还是 reason.
promise.then(onFuilled,onRejected)
四、规范
1.参数的规范
1.1 onFulfilled 必须是函数类型, 如果不是函数类型 ,应该被忽略(这里的忽略是指给一个默认值,并不是真正意义上的忽略);
1.2 onRejected 必须是函数类型, 如果不是函数类型 ,应该被忽略(同上);
2. onFulfilled 特性
2.1 在 promise 变成 fulfilled 时, 应该调用 onFulfilled ,参数是 value;(onFulfilled 的执行时机?)
2.2 在 promise 变成 fulfilled 之前, 不应该调用 onFulfilled;
2.3 只能被调用一次,可以注册若干个回调函数(promise.then().then().then()....);(怎么实现只调用一次?)
3. onRejected 特性
3.1 在 promise 变成 rejected 时, 调用 onRejected ,参数是reason;
3.2 在 promise 变成 rejected 之前,不应该调用 onRejected.
3.3 只能调用一次
4. onFulfilled 和 onRejected 应该是在微任务阶段执行
为什么微任务阶段执行?
一定要等前面的任务执行完,才进行调用. 微任务是在一轮宏任务执行完之后执行;
5. then方法可以被调用多次
5.1 promise 变成 fulfilled 之后 , 所有的 onFulfilled 回调都应该按照注册的顺序执行,也可以理解为按照 .then() 的顺序执行;
例:
promise.then(onFulfilled , onRejected).then(onFulfilled1 => ( )).then(....)
5.2 promise 变成 rejected 之后 , 所有的 onRejected 回调都应该按照注册的顺序执行,也可以理解为按照 .then() 的顺序执行;
6. 返回值
规范里定义 then 应该返回一个promise
const promise2 = promise( onFulfilled , onRejected );
6.1 onFulfilled 或 onRejected 执行结果 为 x(任何东西:值或者 promise),调用resolvePromise;
6.2 onFulfilled 或 onRejected 执行过程中抛出了异常,promise2需要被 reject;
6.3 如果 onFulfilled 不是一个函数,promise2 应该以 promise1 的value 触发 fulfilled;
6.4. 如果 onRejected 不是一个函数,promise2 应该以 promise1 的reason 触发 fulfilled
7. resolvePromise
promise2:当前第一个promise 的返回值;
X:无论是 onFulfilled 还是 onRejected 的执行结果
resolve、reject :变更方法
resolvePromise(promise2, x, resolve, reject)
7.1 如果promise2 和 x 相等 reject typeError;
7.2 如果 x 是一个 promise
如果 x 是pending 状态 ,promise 必须要在pending 状态,直到 x 的状态变更。
如果 x 是 fulfilled ,value --> fulfilled
如果 x 是 rejected ,reason --> rejected
7.3 如果 x 是一个 Object 或者 Function
去获取 x.then(),如果报错,reject reason
如果 then 是一个函数,then.call(x, resolvePromiseFn, rejectPromiseFn)
为什么用 call 改变 this 指针,或者then的时候可能会导致 指针指向改变,所以用 call 继续执行之前的逻辑
五、实现promise的具体步骤(大概九步);
1. promise 应该是一个构造函数或者 class
const promise = new promise();
新建promise-class.js,今天我们用class 来实现promise
class MPromise{ constructor(){ } }
2.定义三种状态
const PENDING = 'pending'; const FULFILLED = 'fulfilled'; const REJECTED = 'rejected'; class MPromise{ constructor(){ } }
3.初始化状态
const PENDING = 'pending'; const FULFILLED = 'fulfilled'; const REJECTED = 'rejected'; class MPromise{ constructor(){ this.status = PENDING; this.value = null; this.reason = null; } }
4.实现 resolve 和 reject
4.1 这两个方法要更改 status,从 pending 变成 fulfilled / rejected
4.2 入参分别是 value 和 reason
const PENDING = 'pending'; const FULFILLED = 'fulfilled'; const REJECTED = 'rejected'; class MPromise{ constructor(){ this.status = PENDING; this.value = null; this.reason = null; } resolve(value){ // 最终态不可被改变,所以需要加一个判断 // 只有当 status 为初始态的时候才可以改变 if(this.status === PENDING){ this.status = FULFILLED; this.value = value; } } reject(reason){ if(this.status === PENDING){ this.status = REJECTED; this.reason= reason; } } }
5.对于实例化 promise 时的入参处理
5.1 入参是一个函数
const promise = new promise((resolve,reject)=>{ })
5.2 接受 resolve 和 rejected 两个参数
5.3 初始化 promise 就要同步执行这个函数,并且有任何报错都要通过 reject 抛出
const promise = new promise((resolve,reject)=>{ axios.get('www.baidu.com') }).then(result=>{ // 这里需要注意一下,创建之处就已经执行了 // 并不是调用 .then() 的时候才会执行 // 同步执行的,所以可以缓存一个 promise ,需要用到的时候直接取值即可 // 获取的时候 并不会再次发送请求,所以不用担心流量的偷跑 与 性能的问题 })
const PENDING = 'pending'; const FULFILLED = 'fulfilled'; const REJECTED = 'rejected'; class MPromise{ constructor(fn){ this.status = PENDING; this.value = null; this.reason = null; //需要里面调用,有报错需要立马抛出 try{ // 考虑严谨性,更改 this 指向为当前环境 fn(this.resolve.bind(this), this.reject.bind(this)); } catch(e){ this.reject(e) } } resolve(value){ // 最终态不可被改变,所以需要加一个判断 // 只有当 status 为初始态的时候才可以改变 if(this.status === PENDING){ this.status = FULFILLED; this.value = value; } } reject(reason){ if(this.status === PENDING){ this.status = REJECTED; this.reason= reason; } } }
6.实现 then 方法
6.1 then 接受 两个参数 onFulfilled 和 onRejected
6.2 检查并处理参数,如果参数不是一个 function 就忽略
6.3 需要根据当前 promise 的状态,调用不同的函数
如果 promise 是 fulfilled 的时候 我们需要调用 onFulfilled
如果 promise 是 rejected 的时候 我们需要调用 onRejected
6.4 首先拿到所有的回调,因为状态发生变化的时候,无论是成功还是失败我们都需要去执行对应的 回调;新建两个数组 ,分别存储成功和失败的回调,调用 then 的时候,如果还是pending 状态就存入数组。
6.5 在 status 发生变化的时候,执行对应的回调。这里用 es6 的 getter setter,监听 status 的变化,在发生变化的时候来做对应的操作;
这里说一下如果是ES5没有 getter setter,那么我们可以直接在resolve 和 reject 两个方法里面去更改 status 的状态;使用getter setter 后面可以更好的维护,不用关注 status ;
const PENDING = 'pending'; const FULFILLED = 'fulfilled'; const REJECTED = 'rejected'; class MPromise{ //直接生命两个数组即可,这里的数组不会被修改 只会被push进来 // 状态完成的 list FULFILLED_CALLBACK_LIST = []; // 状态失败的 list REJECTED_CALLBACK_LIST = []; // 存储初始化 status _status = PENDING; constructor(fn){ this.status = PENDING; this.value = null; this.reason = null; //需要里面调用,有报错需要立马抛出 try{ // 考虑严谨性,更改 this 指向为当前环境 fn(this.resolve.bind(this), this.reject.bind(this)); } catch(e){ this.reject(e) } } get status(){ // 所有真实的 status return this._status; } set status(newStatus){ this._status = newStatus; // 判断不同的状态 执行不同的逻辑 switch(newStatus){ case FULFILLED: { // then 方法已经判断过是不是function 所以这里不需要判断 // 在 status 发生变化的时候,执行对应的回调。 this.FULFILLED_CALLBACK_LIST.forEach(callback=>{ callback(this.value) }); break; } case REJECTED: { this.REJECTED_CALLBACK_LIST.forEach(callback=>{ callback(this.reason) }); break; } } } resolve(value){ // 最终态不可被改变,所以需要加一个判断 // 只有当 status 为初始态的时候才可以改变 if(this.status === PENDING){ this.value = value; this.status = FULFILLED; } } reject(reason){ if(this.status === PENDING){ this.reason= reason; this.status = REJECTED; } } then(onFulfilled, onRejected){ const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled : (value) => value const rejectedFn = this.isFunction(onRejected) ? onRejected : (reason) => throw(reason) switch(this.status){ case FULFILLED: { fulFilledFn(this.value); break; } case REJECTED: { rejectedFn(this.reason); break; } case PENDING: { this.FULFILLED_CALLBACK_LIST.push(fulFilledFn); this.REJECTED_CALLBACK_LIST.push(rejectedFn); break; } } } isFunction(param){ return typeof param === 'function'; } }
7. then 的返回值
7.1 如果 onFulfilled 或者 onRejected 抛出一个异常 e ,那么新的 promise 必须 reject e;
7.2 返回值应该是一个 promise
7.3 如果 onFulfilled 不是函数,且 promise1 成功(resolve 状态)执行,promise2 必须返回同样的状态和value;(规范里定义的)
7.4 如果 onRejected 不是函数,且 promise1 拒绝执行,promise2 必须返回同样的状态和 reason;
7.5 如果 onFulfilled 或者 onRejected 返回一个值 x ,运行 resolvePromise 方法。
8. resolvePromise 方法的具体实现
resolvePromise 函数的意义,就是对promise 各种值的处理, 让 promise 可以返回一个结果,无论是 resolve 还是 reject
8.1 如果 promise2 和 x 相等
8.1 如果 x 是一个promise ,promise 必须要在 pending 状态,直到 x 的状态变更
如果 x fulfilled ,value ---> fulfilled
如果 x rejected ,reason ----> rejected
8.1 如果 x 是一个 object / Function
去获取 const then = x.then, reject reason
then 是一个函数,then.call(x,resolvePromiseFn, rejectPromiseFn)
const PENDING = 'pending'; const FULFILLED = 'fulfilled'; const REJECTED = 'rejected'; class MPromise{ //直接生命两个数组即可,这里的数组不会被修改 只会被push进来 // 状态完成的 list FULFILLED_CALLBACK_LIST = []; // 状态失败的 list REJECTED_CALLBACK_LIST = []; // 存储初始化 status _status = PENDING; constructor(fn){ this.status = PENDING; this.value = null; this.reason = null; //需要里面调用,有报错需要立马抛出 try{ // 考虑严谨性,更改 this 指向为当前环境 fn(this.resolve.bind(this), this.reject.bind(this)); } catch(e){ this.reject(e) } } get status(){ // 所有真实的 status return this._status; } set status(newStatus){ this._status = newStatus; // 判断不同的状态 执行不同的逻辑 switch(newStatus){ case FULFILLED: { // then 方法已经判断过是不是function 所以这里不需要判断 // 在 status 发生变化的时候,执行对应的回调。 this.FULFILLED_CALLBACK_LIST.forEach(callback=>{ callback(this.value) }); break; } case REJECTED: { this.REJECTED_CALLBACK_LIST.forEach(callback=>{ callback(this.reason) }); break; } } } resolve(value){ // 最终态不可被改变,所以需要加一个判断 // 只有当 status 为初始态的时候才可以改变 if(this.status === PENDING){ this.value = value; this.status = FULFILLED; } } reject(reason){ if(this.status === PENDING){ this.reason= reason; this.status = REJECTED; } } then(onFulfilled, onRejected){ const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled : (value) => value const rejectedFn = this.isFunction(onRejected) ? onRejected : (reason) => throw(reason) //如果 onFulfilled 或者 onRejected 抛出一个异常 e ,那么新的 promise 必须 reject e; const fulFilledFnWitchCatch = (resolve, reject, newPromise) => { try{ // 不是一个函数 就直接resolve ,因为有返回值了,所以需要判断 if(!this.isFunction(onFulfilled)){ resolve(this.value) }else{ const x = fulFilledFn(this.value); this.resolvePromise(newPromise, x, resolve, reject); } }catch(e) { reject(e) } } const rejectedFnWitchCatch = (resolve, reject, newPromise) => { try{ if(!this.isFunction(onRejected)){ reject(this.reason); }else{ const x = rejectedFn(this.reason); this.resolvePromise(newPromise, x, resolve, reject); } }catch(e) { reject(e) } } switch(this.status){ // then 的返回值是一个promise case FULFILLED: { const newPromise = new MPromise((resolve, reject) => fulFilledFnWitchCatch(resolve, reject, newPromise)); return newPromise; } case REJECTED: { const newPromise = new MPromise((resolve, reject) => rejectedFnWitchCatch(resolve, reject, newPromise)); return newPromise; } case PENDING: { const newPromise = new MPromise((resolve, reject) => { this.FULFILLED_CALLBACK_LIST.push(() => fulFilledFnWitchCatch(resolve, reject, newPromise)); this.REJECTED_CALLBACK_LIST.push(() => rejectedFnWitchCatch(resolve, reject, newPromise)); }); return newPromise; } } } // 规范里定义resolvePromise 需要接受一个 newPromise // resolvePromise 函数的意义,就是对promise 各种值的处理 // 让 promise 可以返回一个结果,无论是 resolve 还是 reject resolvePromise(newPromise, x, resolve, reject){ if(newPromise === x){ // 返回一个错误信息,信息无所谓什么都可以 // 为什么要 reject 一个错误信息,因为如果 newPromise 和 x 相等会相互调用,形成一个死循环 return reject(new TypeError('Type Error,Please....')) } if(x instanceOf MPromise){ //如果是promise 肯定有then 方法 x.then(y =>{ this.resolvePromise(newPromise, y, resolve, reject) }, reject); } else if(typeof x === 'object' || this.isFunction(x)){ // typeof null 也是 object,所以需要加判断 if(x === null){ return resolve(x) } // 按照规范的语义化写法 let then = null; try{ then = x.then; }catch(error){ return reject(error); } if(this.isFunction(then)){ // 规范中要求 then 方法 只能被调用一次 // 定义一个 called 变量,标识是否被调用 let called = false; try{ // 为了不发生异常错误,更换then 的 this 指向 为x then.call( x, (y) =>{ if(called){ return; } called = true; // 简单的递归,目的就是找到所有的 x this.resolvePromise(newPromise, y, resolve, reject); }, (r) =>{ if(called){ return; } called = true; reject(r); } ) }catch(error){ if(called){ return; } reject(error); } }else{ resolve(x); } } else { resolve(x) } } isFunction(param){ return typeof param === 'function'; } }
9. onFulfilled 和 onRejected 是在微任务中执行的
如何实现?
queueMicrotask(()=>{});传入一个函数,放在微任务里面调用
const PENDING = 'pending'; const FULFILLED = 'fulfilled'; const REJECTED = 'rejected'; class MPromise{ //直接生命两个数组即可,这里的数组不会被修改 只会被push进来 // 状态完成的 list FULFILLED_CALLBACK_LIST = []; // 状态失败的 list REJECTED_CALLBACK_LIST = []; // 存储初始化 status _status = PENDING; constructor(fn){ this.status = PENDING; this.value = null; this.reason = null; //需要里面调用,有报错需要立马抛出 try{ // 考虑严谨性,更改 this 指向为当前环境 fn(this.resolve.bind(this), this.reject.bind(this)); } catch(e){ this.reject(e) } } get status(){ // 所有真实的 status return this._status; } set status(newStatus){ this._status = newStatus; // 判断不同的状态 执行不同的逻辑 switch(newStatus){ case FULFILLED: { // then 方法已经判断过是不是function 所以这里不需要判断 // 在 status 发生变化的时候,执行对应的回调。 this.FULFILLED_CALLBACK_LIST.forEach(callback=>{ callback(this.value) }); break; } case REJECTED: { this.REJECTED_CALLBACK_LIST.forEach(callback=>{ callback(this.reason) }); break; } } } resolve(value){ // 最终态不可被改变,所以需要加一个判断 // 只有当 status 为初始态的时候才可以改变 if(this.status === PENDING){ this.value = value; this.status = FULFILLED; } } reject(reason){ if(this.status === PENDING){ this.reason= reason; this.status = REJECTED; } } then(onFulfilled, onRejected){ const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled : (value) => value const rejectedFn = this.isFunction(onRejected) ? onRejected : (reason) => throw(reason) //如果 onFulfilled 或者 onRejected 抛出一个异常 e ,那么新的 promise 必须 reject e; const fulFilledFnWitchCatch = (resolve, reject, newPromise) => { queueMicrotask(() => { try{ // 不是一个函数 就直接resolve ,因为有返回值了,所以需要判断 if(!this.isFunction(onFulfilled)){ resolve(this.value) }else{ const x = fulFilledFn(this.value); this.resolvePromise(newPromise, x, resolve, reject); } }catch(e) { reject(e) } }); } const rejectedFnWitchCatch = (resolve, reject, newPromise) => { queueMicrotask(() => { try{ if(!this.isFunction(onRejected)){ reject(this.reason); }else{ const x = rejectedFn(this.reason); this.resolvePromise(newPromise, x, resolve, reject); } }catch(e) { reject(e) } }); } switch(this.status){ // then 的返回值是一个promise case FULFILLED: { const newPromise = new MPromise((resolve, reject) => fulFilledFnWitchCatch(resolve, reject, newPromise)); return newPromise; } case REJECTED: { const newPromise = new MPromise((resolve, reject) => rejectedFnWitchCatch(resolve, reject, newPromise)); return newPromise; } case PENDING: { const newPromise = new MPromise((resolve, reject) => { this.FULFILLED_CALLBACK_LIST.push(() => fulFilledFnWitchCatch(resolve, reject, newPromise)); this.REJECTED_CALLBACK_LIST.push(() => rejectedFnWitchCatch(resolve, reject, newPromise)); }); return newPromise; } } } catch(onRejected){ return this.then(null, onRejected) } // 规范里定义resolvePromise 需要接受一个 newPromise // resolvePromise 函数的意义,就是对promise 各种值的处理 // 让 promise 可以返回一个结果,无论是 resolve 还是 reject resolvePromise(newPromise, x, resolve, reject){ if(newPromise === x){ // 返回一个错误信息,信息无所谓什么都可以 // 为什么要 reject 一个错误信息,因为如果 newPromise 和 x 相等会相互调用,形成一个死循环 return reject(new TypeError('Type Error,Please....')) } if(x instanceOf MPromise){ //如果是promise 肯定有then 方法 x.then(y =>{ this.resolvePromise(newPromise, y, resolve, reject) }, reject); } else if(typeof x === 'object' || this.isFunction(x)){ // typeof null 也是 object,所以需要加判断 if(x === null){ return resolve(x) } // 按照规范的语义化写法 let then = null; try{ then = x.then; }catch(error){ return reject(error); } if(this.isFunction(then)){ // 规范中要求 then 方法 只能被调用一次 // 定义一个 called 变量,标识是否被调用 let called = false; try{ // 为了不发生异常错误,更换then 的 this 指向 为x then.call( x, (y) =>{ if(called){ return; } called = true; // 简单的递归,目的就是找到所有的 x this.resolvePromise(newPromise, y, resolve, reject); }, (r) =>{ if(called){ return; } called = true; reject(r); } ) }catch(error){ if(called){ return; } reject(error); } }else{ resolve(x); } } else { resolve(x) } } isFunction(param){ return typeof param === 'function'; } }
到这里我们 简单的 promise 已经实现了,可以简单的去测试一下
const test = new MPromise((resolve, reject) => { setTimeout(()=>{ resolve(1111); },1000) }).then(console.log) const test = new MPromise((resolve, reject) => { setTimeout(()=>{ reject(1111); },1000) }).then((value) => { console.log('完成' + value) }).catch((reason) => { console.log('报错' + reason) })
到这里 实例方法 resolve reject 已经 加完了,静态方法后期给大家补充;