嘿,JavaScript 粉丝们,今天我将向您介绍 Promise 以及如何更好地学习或理解它们。很多人认为这是一个复杂的话题,对此感到困惑,尽管这没有什么棘手的,如果你经常练习,你会成为专家,我保证。我今天的任务是帮助您理解基础知识,并展示 Promise 的本质以及为什么我们需要它们。
想象一下,您已向朋友保证每天早上都会坚持锻炼,如果您这样做了,请通知他们。你的承诺并不妨碍你或你的朋友过他们的生活,他们只是在等待你关于承诺成功或失败的通知,以便对你做出结论或采取行动。
这个小例子说明了 Promise 作为事件的本质以及通过该事件连接的两个参与者:在本例中,是消费者(你的朋友)和生产者(你):
如果我们稍微简化一下,我们可以说在 javascript 中我们看到了与 Promise 类相同的行为,它使我们能够在不阻塞 javascript 主线程的情况下执行异步任务,并在完成时通知订阅者我们的承诺。
让我们举个例子来了解如何使用它:
让我们按顺序回顾一下这段代码:
执行器函数是promise的基础,这个函数在promise创建时立即被调用。
执行器函数有两个位置参数,第一个是resolve方法,第二个是reject方法。这两种方法都负责在一段时间内完成 Promise。
例如,我们承诺一周每天早上起床锻炼身体。在这种情况下,我们的 Promise 会持续一整周,如果你在第 3 天无法兑现,你可以调用拒绝方法,每个订阅你 Promise 的人都会知道这一点。反之亦然,如果你遵守了你的承诺,那么在第 7 天你将调用resolve方法,该方法将通知你的朋友你已经成功地遵守了你的承诺。所以你可以看到,消费者(你的朋友)完全独立于你何时告诉他们结果,他们只需要确保当他们告诉他们结果时,他们就能得到结果。
下图显示了可能的 Promise 状态,它们是“pending”、“fulfilled”和“rejected”。当一个 Promise 刚刚发起时,它的状态是“pending”。完成后,它要么“已完成”,要么“被拒绝”,具体取决于调用哪个方法来完成它。
还值得注意的是,一个 Promise 执行器不能完成多次,所有后续对resolve或reject方法的调用都将被忽略。
使用 Promise.prototype.then 方法,您可以同时处理正面和负面场景,因为该函数接受两个回调,如上面的屏幕截图所示。
使用 Promise.prototype.catch 你只能处理像这样的负面场景:
并保留 Promise.prototype.then 以获得积极的场景。
此外,promise 还提供了一种方法,您可以使用该方法来执行无论结果如何都应该执行的代码。这个方法就是Promise.prototype.finally:
此方法不执行任何操作并且不返回任何内容,因为它旨在完成或清理以前的操作。例如,向用户显示消息或隐藏加载程序。
太好了,至此,我们已经介绍了 Promise 的基础知识,所以我建议我们继续看一个实际示例,例如从 API 请求数据,将其从原始 HTTP 响应转换为 JSON,然后输出到控制台:
正如你所看到的,在现实世界中使用它的结果与我们在文章开头练习的技能没有太大区别。但是,您可能仍然注意到了一些新的事情:
之前每个 Promise.prototype.then 和 Promise.prototype.catch 处理程序的结果都会传递到下一个 Promise 处理程序。值得一提的是,Response.json 方法返回一个 Promise,该 Promise 在执行时将返回一个 JSON,并调用以下处理程序将该 JSON 传递给它。
就 Promise.prototype.finally 而言,它是一个“隐形”处理程序,你可以说它将前一个响应通过自身传递到下一个响应。
太棒了,我相信现在您已经更好地理解了 Promise 是什么、如何使用它以及它可以有什么状态。另外,我想在下面列出我们今天讨论的要点(备忘单):
Javascript Promise — 它是一个特殊的对象,允许您执行异步操作并在完成时通知消费者
Promise 实例可以有 3 种状态——“pending”、“fulfilled”和“rejected”
Promise 实例有 3 个主要方法——“then”、“catch”和“finally”。
Promise.prototype.then — 旨在处理拒绝和成功结果
Promise.prototype.catch — 旨在处理拒绝的结果
Promise.prototype.finally — 旨在进行一些清理工作
您可以按照您想要的任何顺序链接处理程序,它们将按顺序执行
前一个 Promise 的结果会进入下一个 Promise,因此为了使 Promise 链可扩展,您必须记住每次都从处理程序返回一个 Promise,除了“finally”处理程序。
在本主题的后续部分中,我们将介绍更高级的 Promise 技术并深入研究其功能,因此请订阅、点赞并保持关注!
以上是学习 javascript 承诺。部分 什么是承诺?的详细内容。更多信息请关注PHP中文网其他相关文章!