前奏
笔者公司前端小组,线上出现了因为Promise用错了而导致的问题。 本文的出发点不仅是了解Promise,主要目的是跟着特性去写一个Promise。 所以前提是你已经掌握了Promise的基本特性,如果没有接触过的话,请点击学习
正文
熟悉es6的Promise特性。
1.特性概览
-
链式调用。
-
内部三种状态。
内部三种状态分别为pending、fullfiled、rejected,初始化状态为pending。状态变化可以从pending转化fullfiled或rejected。无其他转化方式。
2.出现的背景
解决ajax回调地狱。
ajax回调地狱,本质是希望不可控制的异步变成同步形式。如:
ajax1({...,success(res1){ ... }}) ajax2({...,params:{res1},success(res2){ // error no res1 ... }})
当我们的ajax2需要用到ajax1的时候,我们不得不使用嵌套式:
ajax1({...,success(res1){ ajax2({...,params:{res1},success(res2){ /// doing something }}) }})
这种写法的最大问题就是当嵌套层数很多当时候,代码会变得难以维护。
那么 how is Promise的写法 ajax改造:
p1 = function() { return new Promise(function(resolve){ ajax1({...,success(res1){ resolve(res1) }}) }) } p2 = function(){ return new Promise(function(resolve){ ajax2({...,params:{res1},success(res2){ /// doing something }}) }) }
那么最终的写法则变成
p1().then(res=>{ return p2() }).then(res2=>{ // doing something })
3 具体特性。
这里根据Promise A+ 把接下来的几个定义函数做在约定。
1.new Promise().then(),传递的函数分别叫 onFulfilled、onRejected
开始手写
1.Promise是个函数
所以我们最先开始的就是传递一个函数
function Promise(executor) { if( !isFunc(executor) ){ throw 'Promise2 传递的参数不为functon!!!'; } }
2.Promise 初始状态。
promise有三种状态,可以用ts的枚举
enum pStatus { pending = 'pending', fulled = 'fullfilled', rejected = 'rejected' }
然后我们需要定义一些属性。
function Promise() { if( !isFunc(executor) ){ throw 'Promise2 传递的参数不为functon!!!'; } this.status = pStatus.pending; // 默认状态 this.resovlecbs = []; // 回调的resolve函数 主要来自于Promise.prototype.then this.rejectcbs = []; // 回调的reject函数 主要来自于Promise.prototype.then this.value; // 记录的resolve值 this.error; // 记录的reject值 }
我们知道Promise传递的函数,是直接会在主线程的执行的,所以我们需要直接执行它。
function Promise() { if( !isFunc(executor) ){ throw 'Promise2 传递的参数不为functon!!!'; } this.status = pStatus.pending; // 默认状态 this.resovlecbs = []; // 回调的resolve函数 主要来自于Promise.prototype.then this.rejectcbs = []; // 回调的reject函数 主要来自于Promise.prototype.then this.value; // 记录的resolve值 this.error; // 记录的reject值 try { executor(resolve,reject); // 传递的函数的执行。 } catch (error) { reject(error); // 捕获的异常会直接执行reject。 } }
3.开始Promise的链式结构,达到异步结果变同步,解决回调地狱。
首先需要说明的是链式的结构的原理是不断返回新的Promise,也就是说then的结果是
Promise.prototype.then = function() { return new Promise(function(resolve,reject){ xxx... }) }
首先我们需要明确,Promise具体特性是什么?
1.then 传入的值分别是 resolve的回调和 reject状态回调。
2.传递值,将上一个then的值一直往下传。
3.符合同层先来先到,异层必定上层先执行的策略。
为了了解第三个特性的详细意思之前,让我们看一个例子
var p1 = new Promise(function(resolve,reject){ resolve('p1') }); var p2 = new Promise(function(resolve,reject){ resolve('p2') }); p1.then(()=>{ console.log('p11') }).then(()=>{ console.log('p12') }) p2.then(()=>{ console.log('p21') }).then(()=>{ console.log('p22') })
相信大家都知道顺序为 p11 => p21 => p12 => p22。原因的话涉及到宏微任务的特性,请参考这篇文章,点击学习。 想必大家已经明白第三点了。
那么如何实现?
分步骤:
1) 传递给Promise的函数,完成后我们才会执行then传递的函数。也就是
new Promise(function(resolve,reject){ resolve('xxx') // (1)只有执行完这个才会执行后面then的 onFulfilled函数 }).then(function(){ ...xxx // (2)这是第二步 })
所以then传递onFulfilled函数和onRejected函数都是在resolve中执行的。所以then其实只是去保存then传递的函数而已,而保存的地方则是Promise主函数内部的resolvecbs和rejectcbs这两个数组。
我觉得可能会有人问为什么会是数组?
因为你可能会这么写:
var p = new Promise(...); p.then(function(){ ... },...); p.then(function(){ ... },...); p.then(function(){ ... },...);
这种非链路,其实都是把onFullfilled,保存到Promise内部,所以需要数组。
然后就是Promise内部到resolve函数和reject函数。这两个函数会做为 用户传入的函数的参数传入。 本质内部就是去遍历执行reslovecbs的函数项。并且改变状态,还有就是将传入的值记录下来,这些值会传给onFullfilled,并由onFullfilled决定是否要继续传递下去。也即是:
then(function onFullfilled(value){ // value 来自于resolve传递的参数。 return value // return 则表示续传 下一个then是否能拿到。 })
我们添加下,大致如下:
function Promise() { if( !isFunc(executor) ){ throw 'Promise2 传递的参数不为functon!!!'; } this.status = pStatus.pending; // 默认状态 this.resovlecbs = []; // 回调的resolve函数 主要来自于Promise.prototype.then this.rejectcbs = []; // 回调的reject函数 主要来自于Promise.prototype.then this.value; // 记录的resolve值 this.error; // 记录的reject值 const resolve = (value:object)=>{ // resolve做的三件事 this.value = value; // 记录值 then 的 onFullfilled会用它 this.resovlecbs.forEach((item:Function)=>{ item(value); // 这个就是 onFullfilled函数,会用上面的value }) this.status = pStatus.fulled; // 把状态改变为 fullfilled } // ... reject同理 try { executor(resolve,reject); } catch (error) { reject(error); } }resolve中执行的是resolveCbs数组存放的函数。而这些函数是来自于then推送的。
但是值得注意的是,函数除了执行then传递的onFullfiled函数和onRejected函数,还要将这两个返回的值,传递下去,所以要执行下一个Promise的resolve
,因为resolve的第一个特性就是记录值。 所以then是这样的。
Promise.prototype.then = function (onFullfilled:Function=noop,onRejected:Function=noop) { let scope = this; return new Promise(function(resolve = noop,reject = noop){ scope.resovlecbs.push((value)=>{ handlerRes(onFullfilled,value,resolve); }) scope.rejectcbs.push((error)=>{ handlerRes(onRejected,error,reject); }) }); } export function handlerRes(handler,message,next){ let res if(isFunc(handler)){ res = handler(message); } next(res); // 执行下一个函数的resolve }
可以看到这里是把 then传递的函数onFullfilled和onRejected分别推入 实例的 resovlecbs 数组和 rejectcbs()达到resolve和onFullfilled的同步执行的效果。
且不仅是onRresolved被执行,同时被执行的还有下一个Promise的 resolve。
这样已经实现了then 链的顺序执行了。
对于构造函数new Promise(),的几个步骤是 创建一个空对象,并将Promise内部执行的所有属性都挂载到这个对象上。也就是this的所有属性。
传递都效果图如下:
但是上面的写法会有两个问题:
-
1.无法达到前面说的
符合同层先来先到,异层必定上层先执行的策略。
,这种效果,正式event loop的队列。 所以我们可以使用微任务或宏任务。 这里是了简化代码结构使用setTimeout来模拟,如果感兴趣可以去了解下这个npm库asap
,点击这里 -
2.目前我们的then函数的写法是直接把函数推入到resolvecbs数组,等待resolve去执行,但是这种方式不hack,如果我们先执行了resolve后,我们在执行then。比如:
var p1 = new Promise(function(resolve,reject){ resolve('p1') }); p1.then(()=>{ console.log('p11') }).
这时候我们会先执行resolve, 完成了resolvecbs的遍历执行,然后才去通过then,对resolvecbs进行搜集。name后面搜集的函数就永远不会执行了。所以我们必须判断状态。
hack写法:
Promise.prototype.then = function (onFullfilled:Function=noop,onRejected:Function=noop) { let scope = this; return new Promise(function(resolve = noop,reject = noop){ if(scope.status === pStatus.pending) { // pending则等待执行 scope.resovlecbs.push((value)=>{ handlerRes(onFullfilled,value,resolve); }) scope.rejectcbs.push((error)=>{ handlerRes(onRejected,error,reject); }) } else if(scope.status===pStatus.fulled) { // fullfilled则直接执行 handlerRes(onFullfilled,scope.value,resolve); } else { // rejectd 直接执行 handlerRes(onRejected,scope.error,reject); } }); }
这里将多种情况考虑进入了,然而你觉得已经结束了吗? 我们来看下Promise A+怎么说的。
翻译下就是:
- 如果 onFulfilled 不是函数且 promise1 成功执行, promise2 必须成功执行并返回相同的值。
- 如果 onRejected 不是函数且 promise1 拒绝执行, promise2 必须拒绝执行并返回相同的值。
什么意思? 让我们看一个例子:
new Promise(function(resolve){ resolve('test') }).then().then(value=>{ console.log(value) })
上述情况,会传递吗?
答案是会。 这是Promise A+的标准。
所以我们在then中必须兼容了。让我们再次改造下then函数。
Promise.prototype.then = function (onFullfilled:Function,onRejected:Function) { let scope = this; return new Promise(function(resolve = noop,reject = noop){ const resolveHandler = function(value){ if(isFunc(onFullfilled)) { handlerRes(onFullfilled,value,resolve); } else { resolve(value) } } const rejectHanlder = function(error) { if(isFunc(onRejected)){ handlerRes(onRejected,error,resolve); } else { reject(error); } } try { if(scope.status === pStatus.pending) { scope.resovlecbs.push((value)=>{ resolveHandler(value) }) scope.rejectcbs.push((error)=>{ rejectHanlder(error); }) } else if(scope.status===pStatus.fulled) { resolveHandler(scope.value); } else { // rejectd rejectHanlder(scope.error); } } catch (error) { reject(error); } }); } function handlerRes(handler,message,next){ let res if(isFunc(handler)){ res = handler(message); } next(res); // 执行下一个函数的resolve }好了,到了这里基本已经完成大部分了,然而,关于回调地狱的问题依然没有解决。让我们看看我们是怎么处理回调地狱的。
promise1.then(function(){ return promise2 }).then(value=>{ console.log(value) // 应该需要拿到promise2的结果 })
目前我们处理then的onFullfilled函数的结果是在handlerRes这个函数中进行的,所以我们必须对这个函数进行改造,来适应return类型为promise的处理。
function handlerRes(handler,message,nextResolve,nextReject,Promise){ let res if(isFunc(handler)){ res = handler(message); } if(res && res instanceof Promise) { if(res.status===pStatus.pending){ res.then(value=>{ nextResolve(value) },err=>{ nextReject(err) }) } } else { nextResolve(res); } }
上面已经添加了对Promise的处理,这样ok了吗? 如果promise2也是个深层次的promise则会出问题。 如promise2.then(value=>{}); value如果是promise
的实例, 这个时候,我们的handlerRes还是会问题的。
所以我们需要递归的处理,让我们改造下:
export function deepGet(res,Promise2,nextResolve,nextReject){ if(res && res instanceof Promise2) { if(res.status===pStatus.pending){ res.then(value=>{ deepGet(value,Promise2,nextResolve,nextReject) },err=>{ nextReject(err) }) } } else { nextResolve(res); } } export function handlerRes(handler,message,nextResolve,nextReject,Promise2){ let res if(isFunc(handler)){ res = handler(message); } deepGet(res,Promise2,nextResolve,nextReject) }
完整的代码示例如下:
Promise2.prototype.then = function (onFullfilled:Function,onRejected:Function) { let scope = this; return new Promise2(function(resolve = noop,reject = noop){ const resolveHandler = function(value){ if(isFunc(onFullfilled)) { handlerRes(onFullfilled,value,resolve,reject,scope.constructor); } else { resolve(value) } } const rejectHanlder = function(error) { if(isFunc(onRejected)){ handlerRes(onRejected,error,resolve,reject,scope.constructor); } else { reject(error); } } try { if(scope.status === pStatus.pending) { scope.resovlecbs.push((value)=>{ resolveHandler(value) }) scope.rejectcbs.push((error)=>{ rejectHanlder(error); }) } else if(scope.status===pStatus.fulled) { resolveHandler(scope.value); } else { // rejectd rejectHanlder(scope.error); } } catch (error) { reject(error); } }); } export function deepGet(res,Promise2,nextResolve,nextReject){ if(res && res instanceof Promise2) { if(res.status===pStatus.pending){ res.then(value=>{ deepGet(value,Promise2,nextResolve,nextReject) },err=>{ nextReject(err) }) } } else { nextResolve(res); } } export function handlerRes(handler,message,nextResolve,nextReject,Promise2){ let res if(isFunc(handler)){ res = handler(message); } deepGet(res,Promise2,nextResolve,nextReject) }
then函数的编写完成了,让我们再回来看看Promise本身。
Promise是微任务,这里为了方便, 对Promise本身添加宏任务间隔。reject同理。
function Promise(executor:any) { if( !isFunc(executor) ){ throw 'Promise2 传递的参数不为functon!!!'; } this.status = pStatus.pending; this.resovlecbs = []; this.rejectcbs = []; this.value; this.error; const resolve = (value:object)=>{ this.value = value; setTimeout(()=>{ this.resovlecbs.forEach((item:Function)=>{ item(value); }) this.status = pStatus.fulled; },0) } const reject = (error:Error)=>{ this.error = error; setTimeout(()=>{ this.status = pStatus.rejected; if(this.rejectcbs.length ===0){ throw this.error; } else { this.rejectcbs.forEach((item:Function)=>{ item(error); }) } },0) // if(this.rejectcbs.length === 0 ) throw error; } try { executor(resolve,reject); } catch (error) { reject(error); } }
然而这依然并非是最终版本,因为这无法解决,多次resolve会重复执行 resolvecbs的问题。 所以resolve函数的内容必须旨在pending的状态下才执行。 比如有人会这么做:
new Promise(function(resolve){ reslove('ddd') resolve('ttt') }).then(value=>{ console.log(value) })
为了只打印一个值,我们必须要在resolve函数做个判断,只有pending的时候会
function Promise(executor:any) { if( !isFunc(executor) ){ throw 'Promise2 传递的参数不为functon!!!'; } this.status = pStatus.pending; this.resovlecbs = []; this.rejectcbs = []; this.value; this.error; const resolve = (value:object)=>{ setTimeout(()=>{ if(this.status===pStatus.pending){ // 避免重复执行。 this.value = value; this.resovlecbs.forEach((item:Function)=>{ item(value); }) this.status = pStatus.fulled; // 状态改变 } },0) } const reject = (error:Error)=>{ setTimeout(()=>{ // why if(this.status===pStatus.pending){ // 添加了判断 避免重复执行 this.error = error; this.status = pStatus.rejected; //状态改变 if(this.rejectcbs.length ===0){ throw this.error; } else { this.rejectcbs.forEach((item:Function)=>{ item(error); }) } } },0) // if(this.rejectcbs.length === 0 ) throw error; } try { executor(resolve,reject); } catch (error) { reject(error); } }
基本完美了,然而还是一个Promise A+标准的处理问题。当resolve(value)的value是个Promise的话,如:
let p1 = new Promise(function(resolve,reject){ resolve('test') }) new Promise(function(resolve,reject){ resolve(p1) }).then(value=>{ console.log(value) // 需要打印test。 })
目前我们会直接吧p1这个实例直接返回给then的onFullfilled。继续改造下。
export default function Promise(executor:any) { if( !isFunc(executor) ){ throw 'Promise2 传递的参数不为functon!!!'; } this.status = pStatus.pending; this.resovlecbs = []; this.rejectcbs = []; this.value; this.error; const resolve = (value:object)=>{ if( value instanceof Promise) { // 这里直接判断 return value['then'](resolve, reject); } setTimeout(()=>{ if(this.status===pStatus.pending){ this.value = value; this.resovlecbs.forEach((item:Function)=>{ item(value); }) this.status = pStatus.fulled; } },0) } const reject = (error:Error)=>{ setTimeout(()=>{ // if(this.status===pStatus.pending){ this.error = error; this.status = pStatus.rejected; if(this.rejectcbs.length ===0){ throw this.error; } else { this.rejectcbs.forEach((item:Function)=>{ item(error); }) } } },0) } try { executor(resolve,reject); } catch (error) { reject(error); } }
4.Promise的catch和finally函数。
catch函数和finally函数其实是语法糖,我们完全可以用then替代的。读者大大们思考下。。
下面给出代码:
Promise.prototype.catch = function(catchcb:Function) { return this.then(undefined, catchcb); // 本质是then } Promise.prototype.finally = function (callback) { return this.then((value)=>{ // 本质是then callback(); return value; },callback); }
所以下面这种写法
p.then(onResolve,onReject).catch(onCatch).finally(onFinal);
复制代码
其实是等于
p.then(onResolve,onReject).then(undefined,onCatch).then(onFinal,onFinal);
5.Promise.resolve。
阮一峰给出了这个函数的四种处理方式。
- 1.传递的是Promise,
- 2.传递的是thenable的对象 如 { then:function(){} }
- 3.传递是非thenbale的值
- 4.什么也没传。
需要注意的是Promise.resolve,传递出来的一定是promise。 笔者的写法是
Promise.resolve = function(handler){ if( isObject(handler) && 'constructor' in handler && handler.constructor=== this) { // handler 是 Promise return handler; } else if (isObject(handler) && isFunc(handler.then) ){ // thenable return new this(handler.then.bind(handler)); } else { // 非thenable return new this(function(resolve){ resolve(handler); }) } }
可以看到如果是:
情况1,则直接原封不动的返回。
情况2则返回一个Promise,且把对象的then函数,作为参数传递进入Promise。
情况3 直接把handler resolve掉。
6.Promise.reject.
Promise.reject可不像resolve这么麻烦。完全把传递的值直接传递出来。
Promise.reject = function() { const args = Array.prototype.slice.call(arguments); return new this((resolve, reject) => reject(args.shift())); }
7.Promise.all。
首先是用法:.
const promises = [2, 3, 5, 7, 11, 13].map(function (id) { return new Promise(function(resolve,reject){ setTimeout(()=>{ resolve(id); },id); }) }); Promise.all(promises).then(function (posts) { console.log(posts); })
首先传入的是数组。其次就是所有的数组,其次就是数组存在的Promise全部都执行完后才会进入all的 then函数中。 所以需要一个标记记录实时记录所有已经完成的promise。
然后就是传入的数组 可能有promise也有可能传递的并非是Promise,所以需要hack。 区分是否存在then函数。
Promise.all = function(arr) { if( !isArray(arr) ){ throw 'all函数 传递的参数不为Array!!!'; } let args = Array.prototype.slice.call(arr); let resArr = Array.call(null,Array(arr.length)).map(()=>null); // 记录所有的结果 let handlerNum = 0; // 处理标记 return new this((resolve,reject)=>{ for(let i = 0;i<args.length;i++){ let ifunc = args[i]; if(ifunc && isFunc(ifunc.then) ) { //是否存在then函数。 ifunc.then(value=>{ resArr[i] = value; handlerNum ++; // 标记添加 if(handlerNum>=arr.length){ // 彻底完成 resolve(resArr) // 完成后的数组 } },error=>{ reject(error); }); } else { // 非thenable resArr[i] = ifunc; handlerNum ++; // 标记添加 if(handlerNum>=arr.length){ // 彻底完成 resolve(resArr) // 完成后的数组 } } } }); }
8. Promise.race。
直接上代码吧,大致就是跑的最快的会作为结果传回
Promise2.race = function(arr) { if( !isArray(arr) ){ throw 'race函数 传递的参数不为Array!!!'; } let args = Array.prototype.slice.call(arr); let hasResolve = false; return new this((resolve,reject)=>{ for(let i = 0;i<args.length;i++){ let ifunc = args[i]; if(ifunc && isFunc(ifunc.then) ) { ifunc.then(value=>{ !hasResolve && resolve(value) },error=>{ !hasResolve && reject(error); }); } else { hasResolve = true; !hasResolve && resolve(ifunc) } } }) }
分析同事的问题。
源代码大致如下
let test = function() { return new Promise((resolve,reject)=>{ reject(new Error('test')) }) } Promise.resolve('new').then(res=>{ test().then(res2=>{ ... }) }).catch(err=>{ // use err console.log(err) })
遇到的问题是,最后的catch里面拿不到err。
文中我们已经说过,catch只是then的语法糖,而then的值的传递,是靠onFullfilled的return 和 onRejected的return 传递了。问题这是在then里面缺少了return。
总结:
-
resolve做的三件事情。
1)记录传递的值,准备传递。
2)执行then的onFullfilled函数
3)更换状态。
-
then的执行是根据状态作出不同的相应的。
-
catch和finally只是then的语法糖,finally并非是最后执行的意思,而是一定会执行的意思。
-
Promise.resolve可以快捷的创建一个Promise,他返回的一定是一个Promise。
标签:function,resolve,一步,reject,ts,value,Promise,error From: https://www.cnblogs.com/yayuya/p/16927943.html