这 10 个片段,有助于你理解 ES 中的 Promise

2023-05-28 0 338

在合作开发中,介绍 JavaScript 和 Promise 此基础,有利于提升他们的代码专业技能,那时,他们一起来看一看上面的 10 短片,坚信看完这 10 个短片有利于他们对 Promise 的认知。

短片1:

这 10 个片段,有助于你理解 ES 中的 Promise

Promise并行继续执行,promise.then触发器继续执行。

短片2:

这 10 个片段,有助于你理解 ES 中的 Promise

promise 有四种相同的状况:

pendingfulfilledrejected

除非状况预览,pending->fulfilled 或pending->rejected,就能再度更动它。prom1与prom2相同,因此二者都回到捷伊Promise状况。

短片3

这 10 个片段,有助于你理解 ES 中的 Promise

即便reject后有两个resolve初始化,也根本无法继续执行一场resolve或reject,剩的不能继续执行。

短片 4:

这 10 个片段,有助于你理解 ES 中的 Promise

Promises 能链接初始化,当提到链接初始化 时,他们通常会考虑要回到this,但Promises不用。每次 promise 初始化.then或.catch时,默认都会回到两个捷伊 promise,从而实现链接初始化。

短片 5:

这 10 个片段,有助于你理解 ES 中的 Promise

promise 的 .then或.catch能被多次初始化,但是此处Promise构造函数仅继续执行一场。换句话说,除非promise的

短片 6

这 10 个片段,有助于你理解 ES 中的 Promise

.then或.catch回到的值不能是promise本身,否则将导致无限循环。

短片 7:

这 10 个片段,有助于你理解 ES 中的 Promise

在.then或.catch中回到错误对象不能引发错误,因此后续的.catch不能捕获该错误对象,需要更动为以下对象之一:

return Promise.reject(new Error(error)) throw new Error(error)

因为回到任何非promise 值都将包装到两个Promise对象中,也就是说,回到new Error(error)等同于回到Promise.resolve(new Error(error))。

短片 8:

Promise.resolve(1)   .then(2)   .then(Promise.resolve(3))   .then(console.log)   // 1

.then或.catch的参数应为函数,而传递非函数将导致值的结果被忽略,例如.then(2)或.then(Promise.resolve(3)。

短片 9:

这 10 个片段,有助于你理解 ES 中的 Promise

.then能接受两个参数,第两个是处理成功的函数,第二个是处理错误的函数。.catch是编写.then的第二个参数的便捷方法,但是在使用中要注意一点:.then第二个错误处理函数无法捕获第两个成功函数和后续函数抛出的错误。.catch捕获先前的错误。当然,如果要重写,上面的代码能起作用:

这 10 个片段,有助于你理解 ES 中的 Promise

短片 10:

这 10 个片段,有助于你理解 ES 中的 Promise

process.nextTick和promise.then都属于微任务,而setImmediate属于宏任务,它在事件循环的检查阶段继续执行。在事件循环的每个阶段(宏任务)之间继续执行微任务,因此事件循环的开始继续执行一场。

原文:

http://jamesknelson.com/grokking-es6-promises-the-four-functions-you-need-to-avoid-callback-hell/

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务