ES6 Promise中then与catch的返回值的实例

这篇文章主要介绍了关于es6 promise中then与catch的返回值的实例,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

一.catch为then的语法糖

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

简单来说,就是分为return 值(无return的情况下即返回undefined,也是返回值),throw error, return 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);                        });

登录后复制

输出结果如下:
1689940441-5b40aaea912dc_articlex[1].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);});

登录后复制

输出结果如下:
2156426177-5b40aafad4116_articlex[1].png

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

登录后复制

结果如下图:
3218797185-5b40b1cf33150_articlex[1].png

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

3.return Promise的情况

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

ES6 Class 继承与 super的介绍

jQuery-Ajax请求Json数据并加载在前端页面

以上就是ES6 Promise中then与catch的返回值的实例的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2746818.html

(0)
上一篇 2025年3月8日 04:13:22
下一篇 2025年3月6日 13:26:40

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Vue脚手架的简单使用

    这篇文章主要介绍了关于vue脚手架的简单使用,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 提前申明 注意:自己对vue脚手架的理解和认识,很多东西和理解都是形象上的手法,并不专业和官方 webpack 一种项目构建工具,可…

    2025年3月8日
    200
  • Vue iview-admin框架二级菜单改为三级菜单的方法

    这篇文章主要介绍了关于vue iview-admin框架二级菜单改为三级菜单的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 最近在用 iview-admin的Vue后台模板,从git上下载后发现左侧导航栏最多支持到二级…

    2025年3月8日 编程技术
    200
  • 通过Vue属性$route的params传参

    这篇文章主要介绍了关于通过vue属性$route的params传参,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 vue传值 与 vue传参是两块东西 概念图 原理 vue传参的原理主要在于 Vue.$route.param…

    2025年3月8日
    200
  • vscode搭建Typescript+React+Dva的开发环境

    这篇文章主要介绍了关于vscode搭建typescript+react+dva的开发环境,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 [ 作为2018年前端最应该学的技术 ], Typescript 确实惹火, 这两天崩崩…

    2025年3月8日 编程技术
    200
  • JS字符串转数字的方法

    这篇文章主要介绍了关于js字符串转数字的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 String转换为Number有很多种方式,我可以想到的有5种!但总有一些情况让人猝不及防,总结到这里供自己日后查找方便 parse…

    编程技术 2025年3月8日
    200
  • addEventListener中的EventListener的接口对象

    这篇文章主要介绍了关于addeventlistener中的eventlistener接口对象,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 写在最前 遗漏的知识点:addEventListener的第二个参数不光可以传入一个…

    编程技术 2025年3月8日
    200
  • jQuery中css()和attr()方法的区别

    这篇文章主要介绍了关于jquery中css()和attr()方法的区别,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 方法介绍: css(): html代码: 登录后复制登录后复制 jQuery代码: 立即学习“前端免费学习…

    编程技术 2025年3月8日
    200
  • 使用angularJs ng-repeat做表格合并行效果

    这篇文章主要介绍了关于使用angularjs ng-repeat做表格合并行效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 描述 使用angularJs做出表格合并的效果 后端返回的数据 [ {“fileName”:”1…

    2025年3月8日
    200
  • AngularJS 前台分页实现

    这篇文章主要介绍了关于angularjs 前台分页实现,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 分页思路 考评员查询,因为整体的数据量比较小,所以我们可以将分页放到前台进行处理。 其实分页的原理也很简单,我们根据分页选…

    2025年3月8日
    200
  • Jquery以及AngularJS中Get/Post的传参

    这篇文章主要介绍了关于jquery以及angularjs中get/post的传参,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 传参并不是很难的事,但有时牵扯到例如要传一个对象或者form到后端的时候就会有些麻烦,在这里总结…

    2025年3月8日
    200

发表回复

登录后才能评论