关于 JavaScript 中的 Promise,你应该知道的五件事

开发 前端
Promise 模式是现代 JavaScript 编程的必备条件。 使用 then/catch 链接看起来很简单,但它有一些我们最好知道的细节。 这篇文章将带来关于 Promise 的 5 件事。

Promise 模式是现代 JavaScript 编程的必备条件。 使用 then/catch 链接看起来很简单,但它有一些我们最好知道的细节。 这篇文章将带来关于 Promise 的 5 件事。

1. 反复解决

如果下面的代码运行会发生什么?

new Promise(resolve => {
resolve(new Promise(resolve => {
resolve(new Promise(resolve => {
resolve(10)
}))
}))
})
.then(value => console.log(value)) // 10

then() 给你 10(不是 Promise 实例)。 如果解析的值是一个 Promise,那么它会解析直到它不能 then-able。

2.返回链

then() 链不仅是函数链,还是价值链。

Promise.resolve(10)
.then(value => value + 1)
.then(value => value + 1)
.then(value => console.log(value)) // 12

第一个 then() 为该值提供 10,第二个为 11,第三个为 12。它还对返回的值应用循环链,因此以下代码的工作方式相同。

Promise.resolve(10)
.then(value => value + 1)
.then(value => Promise.resolve(value + 1))
.then(value => console.log(value)) // 12

3.then()的第二个参数

then() 实际上有 2 个参数。 第二个参数采用一个函数来处理拒绝的情况。 它与 catch() 的工作方式非常相似。 以下代码的结果是相同的。

/// then() with second parameter
Promise.reject(10)
.then(
value => value + 1,
reason => handleError(reason), // reason=10
)/// then() and catch()
Promise.reject(10)
.then(value => value + 1)
.catch(reason => handleError(reason)) // reason=10

如果我们两个都像下面这样呢?

Promise.reject(10)
.then(
value => value + 1,
reason => handleError1(reason), // called
)
.catch(reason => handleError2(reason)) // not called

如果两者都给出,则 then() 的第二个参数在 catch() 之前,因此调用了 handleError1() 而不会调用 handleError2()。 唯一的例外是 Promise 实际抛出错误的情况。 请参阅下面的代码。

new Promise(() => { throw 'error' })
.then(
value => value + 1,
reason => handleError1(reason), // not called
)
.catch(reason => handleError2(reason)) // called

它仅在 catch() 子句中捕获错误,因此调用了 handleError2()。 一个有趣的部分是,如果它没有 catch(),即使使用 onReject 参数也会抛出错误。

4. then() 中抛出错误

如果 then() 中发生错误,它会在 catch() 子句中捕获。

Promise.resolve(10)
.then(value => { throw 'error' })
.catch(reason => handleError(reason)) // catch!

5.错误作为一个值

如果我们尝试用错误来解决,这听起来很有趣。 你能想象下面的代码会发生什么吗?

Promise.resolve(new Error('error'))
.then(value => console.log(value)) // Error value
.catch(reason => handleError(reason))

它不会捕获但会正常解析,因此它会记录原始错误。 Promise 不赋予 Error 权限,而是 Promise 本身。

..和一个建议

Promise 模式对于处理异步作业很有用,但它通常涉及带有嵌套 Promise 的曲线代码。 它不利于阅读,因此另一种选择是使用 async/await。 现代 JavaScript 打包器提供了 async/await 语法的转换。

责任编辑:华轩 来源: 七爪网
相关推荐

2014-11-14 17:39:23

云计算

2024-01-09 14:57:22

2012-02-07 13:29:35

2013-01-06 14:11:34

手机版Ubuntu系统

2010-09-02 18:56:09

NoSQL数据库DBA

2018-08-23 08:21:54

TensorFlow机器学习人工智能

2022-05-05 14:06:08

AWS云服务云计算专家

2021-05-19 18:23:40

物联网IOT物联网技术

2019-01-08 17:00:39

2023-10-16 13:36:00

边缘计算数据

2015-02-02 14:12:03

云桌面

2022-04-22 14:28:18

加密推特比特币加密货币

2020-03-25 14:58:12

人工智能平安城市智慧城市

2022-11-16 14:23:37

JavaScript参数属性

2019-02-19 09:34:53

工业物联网IIOT物联网

2020-08-10 15:30:24

XDR网络安全网络威胁

2015-03-11 11:23:38

MySQLPHP开发

2024-01-11 11:28:54

2018-03-22 16:32:49

大数据数据集数据处理

2023-04-21 10:59:38

CIO制造业
点赞
收藏

51CTO技术栈公众号