对Promise中的resolve,reject,catch的理解
Posted tanziyi-666
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了对Promise中的resolve,reject,catch的理解相关的知识,希望对你有一定的参考价值。
想必接触过Node的人都知道,Node是以异步(Async)回调著称的,其异步性提高了程序的执行效率,但同时也减少了程序的可读性。如果我们有几个异步操作,并且后一个操作需要前一个操作返回的数据才能执行,这样按照Node的一般执行规律,要实现有序的异步操作,通常是一层加一层嵌套下去。
为了解决这个问题,ES6提出了Promise
的实现...
一 Promise 对象的含义?
Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示。简单点说,它就是用于处理异步操作的,异步处理成功了就执行成功的操作,异步处理失败了就捕获错误或者停止后续操作。
它的一般表示形式为:
1 new Promise( 2 /* executor */ 3 function(resolve, reject) { 4 if (/* success */) { 5 // ...执行代码 6 resolve(); 7 } else { /* fail */ 8 // ...执行代码 9 reject(); 10 } 11 } 12 );
其中,Promise中的参数executor
是一个执行器函数,它有两个参数resolve
和reject
。它内部通常有一些异步操作,如果异步操作成功,则可以调用resolve()来将该实例的状态置为fulfilled
,即已完成的,如果一旦失败,可以调用reject()来将该实例的状态置为rejected
,即失败的。
我们可以把Promise对象看成是一条工厂的流水线,对于流水线来说,从它的工作职能上看,它只有三种状态,一个是初始状态(刚开机的时候),一个是加工产品成功,一个是加工产品失败(出现了某些故障)。同样对于Promise对象来说,它也有三种状态:
1.pending
初始状态,也称为未定状态,就是初始化Promise时,调用executor执行器函数后的状态。
2.fulfilled
完成状态,意味着异步操作成功。
3.rejected
失败状态,意味着异步操作失败。
二 .then()的时候到底是在then什么?
- 首先要理解Promise是一个对象,有then()方法的对象
- then()的参数是一个函数 (通常在promise链中,参数是一个返回promise的函数 ,这个函数会return一个promise对象)
三 如何破坏promise链?
如果有这样一个promise链:
1 p1().then(p2).then(p3) 2 .then(function(data) { 3 console.log(‘data: ‘ + data); 4 }) 5 .catch(function(error) { 6 console.log(‘error: ‘ + error); 7 }); 8 9 function p1() { 10 return new Promise(function(resolve, reject) { 11 console.log(‘p1 resolved‘); 12 resolve(123); 13 }); 14 } 15 16 function p2() { 17 return new Promise(function(resolve, reject) { 18 console.log(‘p2 rejected‘); 19 reject(456); 20 }); 21 } 22 23 function p3() { 24 return new Promise(function(resolve, reject) { 25 console.log(‘p3 resolved‘); 26 resolve(789); 27 }); 28 }
上面这个例子,console.log结果会是这样:
1 p1 resolved 2 p2 rejected 3 error: 456
总之 : 在一个promise链中,只要任何一个promise被reject,promise链就被破坏了,reject之后的promise都不会再执行,而是直接调用.catch方法。
这也是为什么在standard practice中,一定要在最后加上 .catch
的原因。通过 .catch
能够清楚的判断出promise链在哪个环节出了问题。
以上是关于对Promise中的resolve,reject,catch的理解的主要内容,如果未能解决你的问题,请参考以下文章
JS中的promise返回的resolve()和reject()的理解附代码展示
Vue- Promise函数---参数resolve(调用.then方法)-- 参数reject(调用.catch方法)---链式结构
Promise静态方法实现(all race finally resolve reject)