最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

ES6Promise中then与catch的返回值的实例

来源:动视网 责编:小采 时间:2020-11-27 19:34:02
文档

ES6Promise中then与catch的返回值的实例

ES6Promise中then与catch的返回值的实例:这篇文章主要介绍了关于ES6 Promise中then与catch的返回值的实例,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下一.catch为then的语法糖故then方法与catch方法均会返回一个Promise对象(对,即使return 为某个值,或者throw e
推荐度:
导读ES6Promise中then与catch的返回值的实例:这篇文章主要介绍了关于ES6 Promise中then与catch的返回值的实例,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下一.catch为then的语法糖故then方法与catch方法均会返回一个Promise对象(对,即使return 为某个值,或者throw e
 这篇文章主要介绍了关于ES6 Promise中then与catch的返回值的实例,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

一.catch为then的语法糖

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

简单来说,就是分为return 值(无return的情况下即返回undefined,也是返回值)throw errorreturn Promise

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

1.return 值的情况:

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

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); });

输出结果如下:

调用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);});

输出结果如下:

2.throw error的情况:

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

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

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的回调函数')})

结果如下图:

调用reject函数后,promise变为rejected状态,故执行第一个catch的回调函数
第一个catch的回调函数return 1,故执行第一个then的回调函数
第一个then的回调函数throw Error,故执行第二个catch的回调函数
第二个catch的回调函数ruturn undefined(如上文所言),故执行第二个then的回调函数

3.return Promise的情况

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

用新学的知识实践封了个读取<input type='file'>中图片的插件:
https://github.com/Joeoeoe/-i...
哪里写得不好大家指出啊哈哈

文档

ES6Promise中then与catch的返回值的实例

ES6Promise中then与catch的返回值的实例:这篇文章主要介绍了关于ES6 Promise中then与catch的返回值的实例,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下一.catch为then的语法糖故then方法与catch方法均会返回一个Promise对象(对,即使return 为某个值,或者throw e
推荐度:
标签: 例子 then catch
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top