资讯专栏INFORMATION COLUMN

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

omgdog / 1660人阅读

摘要:值的情况返回的会成为状态。再次重复这一句话为的语法糖,它是的别名。也就是说,也是,它用于捕获错误,它的参数也就是是的第二个参数。所以,假设中如果值的话,新的对象也会是接受状态。

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

一.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对象?!后来看了部分源码剖析后才大致知道为什么会这样子,链接也放下面吧

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96006.html

相关文章

  • ES6 Promise:模式反模式

    摘要:尽管可以让代码更加简洁易读,但对于只熟悉回调函数的人来说,可能对此还是会有所怀疑。始终避免在或使用回调函数,否则会吞噬任何后续的错误,将其作为链的一部分。然而,使用回调函数,使用所谓的,即第一个参数是一个错误回调变得很常见。 原文:ES6 Promises: Patterns and Anti-Patterns作者:Bobby Brennan 当几年前,第一次使用 NodeJS 的时候...

    djfml 评论0 收藏0
  • es6 - Promise

    摘要:所谓异步编程中的异步是相对于同步的概念的。是一系列异步编程规范的统称。如果中的回调函数返回一个值,那么返回的将会成为接受状态,并且将返回的值作为接受状态的回调函数的参数值。参考介绍基础篇深入理解与异步编程。 es6 promise与异步编程 对于一些还不具备大量编程经验的朋友来说,promise可能是es6比较难以掌握的点。首先是很多名词,比如Promises,es6 Promise,...

    wemallshop 评论0 收藏0
  • JavaScript工作原理(四):事件循环,异步编程兴起以及5招async/await实践

    摘要:事件循环从回调队列中获取并将其推送到调用堆栈。如何工作请注意,不会自动将您的回调函数放到事件循环队列中。它设置了一个计时器,当计时器到期时,环境将您的回调函数放入事件循环中,以便将来的某个事件会将其选中并执行它。 我们将通过回顾第一篇文章中单线程编程的缺点,然后在讨论如何克服它们来构建令人惊叹的JavaScript UI。在文章结尾处,我们将分享5个关于如何使用async / awai...

    piglei 评论0 收藏0
  • 【个人向整理】Promise

    摘要:方法而对象本身,有一些方法查看的原型,发现它内置有几个方法参数处理成功的函数,处理错误的函数返回值返回一个对象,所以可以链式调用。参数返回值的参数应该是函数,传入非函数则会发生值穿透。 前言 网上关于Promise的文章确实是非常多了,但是自己实践的并不多,这里是针对自己的一个知识点小结和梳理,当然啦如果有错误欢迎提出^_^。 初定义 定义:Promise对象用于一个异步操作的最终完成...

    2bdenny 评论0 收藏0
  • 这次聊聊Promise对象

    摘要:异步模式编程有四种方法回调函数最基本的方法,把写成的回调函数事件监听为绑定事件,当发生某个事件,就执行发布订阅,以及本文要介绍的对象。它的思想是,每一个异步任务返回一个对象,该对象有一个方法,允许指定回调函数。 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表于云+社区专栏 Promise是CommonJS提出的一种规范,在ES6中已经原生支持Promi...

    Eminjannn 评论0 收藏0

发表评论

0条评论

omgdog

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<