ES6 Promise——then与catch的返回值实践

如下是在学习Promise关于catch与then的疑惑总结javascript

一.catch为then的语法糖

then方法与catch方法均会返回一个Promise对象(对,即便return 为某个值,或者throw error,或者不返回值)
咱们来看看MDN的定义,这里可能为了严谨而说得有点乱七八糟的
clipboard.pnghtml

简单来讲,就是分为return 值(无return的状况下即返回undefined,也是返回值)throw errorreturn Promisejava

二.说说return值与throw error的状况。

1.return 值的状况:

返回的Promise会成为Fulfilled状态。
return的值会做为新Promise对象下一个then的回调函数的参数值,贴代码看例子promise

var example = new Promise((fulfill, reject)=>{
    let i = 1;
    fulfill(i);
})
example
.then((value)=>{ console.log(value); value++; return value;  })
.then((value) => {console.log(value);                        });

输出结果以下:
clipboard.png函数

调用fufill函数return value会传给下一个回调函数
回到上面的疑问,若是没有return呢,那么就会返回undefined
(就是函数无return返回的是undefined的状况,基础要扎实啊啊啊)学习

var example = new Promise((fulfill, reject)=>{
    let i = 1;
    fulfill(i);
})
example
.then((value)=>{ console.log(value); value++; })
.then((value) => {console.log(value);});

输出结果以下:
clipboard.pngspa

2.throw error的状况:

返回的Promise会成为Rejected状态,
下一步执行catch中的回调函数或者then的第二个回调函数参数code

这里出现了以前一直搞混的东西。
再次重复这一句话:catch为then的语法糖,它是then(null, rejection)的别名。
也就是说,catch也是then,它用于捕获错误,它的参数也就是是then的第二个参数。
因此,假设catch中若是return 值的话,新的Promise对象也会是接受状态。
看看例子:htm

var example = new Promise((fulfill, reject)=>{
    let i = 1;
    reject(i);
})
example
.catch(()=>{console.log('我是第一个catch的回调函数'); return 1;})
.then(() =>{console.log('我是第一个then的回调函数');    throw Error    })
.catch(()=>{console.log('我是第二个catch的回调函数')})
.then(() => {console.log('我是第二个then的回调函数')})

结果以下图:
clipboard.png
调用reject函数后,promise变为rejected状态,故执行第一个catch的回调函数
第一个catch的回调函数return 1,故执行第一个then的回调函数
第一个then的回调函数throw Error,故执行第二个catch的回调函数
第二个catch的回调函数ruturn undefined(如上文所言),故执行第二个then的回调函数对象

3.return Promise的状况

至于return Promise的状况下,其实同理啦,我只是刚开始接触Promise语法时感到不是很适应:居然会自动为你生成Promise对象?!后来看了部分源码剖析后才大体知道为何会这样子,连接也放下面吧

连接:
MDN:catch:https://developer.mozilla.org...
MDN:then:https://developer.mozilla.org...
Promise实现:https://tech.meituan.com/prom...

相关文章
相关标签/搜索