Promise 基础:了解 JavaScript Promise
什么是 Promise?
Promise 是 JavaScript 中一种解决异步编程的方案,它以简单明了的方式将异步操作转化成了同步的形式,使得代码形式更加清晰,减少了回调地狱,避免了过度嵌套,提高了可读性和可维护性。
如何使用 Promise?
在 JavaScript 中,Promise 通过对实例化对象的使用来达到处理异步操作的目的。Promise 的特点是具有三个状态:pending(等待中)、resolved(已完成)、rejected(已失败)。其中,pending 状态指的是 Promise 操作正在等待处理,resolved 状态代表操作已完成,rejected 状态代表操作已失败。在操作完成或失败后,promise 将根据相应状态返回值。操作完成时,promise 将返回 Resolve 状态和相应值。操作失败时,promise 将返回 Reject 状态和相应值。
举个例子:我们需要在网页中动态加载一张图片,然后在这个图片加载完毕之后执行一些操作。此时,我们就可以使用 Promise 来实现这个功能。代码如下:
-- -------------------- ---- ------- --- --------- - -------- ----- - ------ --- ----------------- ------- -- - --- --- - --- ------- ---------- - -- -- - ------------ - ----------- - ----- -- - ----------- - ------- - --- -- - ----------------------- ----------- -- - ---------------- -- ------------ -- - ---------------- --
在这段代码中,我们定义了一个 loadImage 函数来加载图片,使用 Promise 实例化对象返回值。当图片加载完毕后,Promise 将返回 resolve 状态和相应值(即 img),否则返回 reject 状态和相应结果。
在之后的使用中,我们通过调用 Promise 对象的 then 方法来实现 Promise 的链式调用,从而在 Promise 每个阶段都拥有事件。当 Promise 成功时,then 方法将会以与 Promise 成功返回值相同的值作为它的参数,并且执行下一个 then、catch、finally 的所设置的函数,从而实现对异步操作的统一化控制。在 Promise 失败时,catch 方法将会作为 Promise 返回值的错误处理函数被执行。
Promise 基础实战
假设有一个业务场景需要向后端请求用户信息,且存在 token 信息。使用 Promise 封装请求用户信息的方法如下:
-- -------------------- ---- ------- --- ----------- - -------- ------- - ------ --- ----------------- ------- -- - --- --- - --- ---------------- --------------- ------------- ------------------------------------- ------ ---------------------- - -- -- - -- --------------- --- - -- ---------- --- ---- - --- -------- - ---------------------------- ----------------- - ---- -- --------------- --- -- - --------------- --------- - - ----------- - ----- -- - ----------- - ---------- -- - ----------------------------------- ---------------- -- - --------------------- -- ------------ -- - ---------------- --
上述代码中,我们封装了一个 getUserInfo 方法用来请求用户信息,这里我们使用 XMLHttpRequest 作为请求桥梁。我们仍然使用了 Promise 实例化对象,并根据后端返回的 response 来使用 resolve 或者 reject 返回不同的状态,即异步操作流程状态。
小结
通过本文的介绍,你已经了解了 Promise 的基础知识,以及如何使用 Promise 来处理异步操作。Promise 已经成为了 JavaScript 中处理异步操作的一种常用方案,你可以通过学习并使用 Promise 来优化代码、提高开发效率。在接下来的工作中,当你遇到复杂的异步操作流程,就可以使用 Promise 来进行解决了。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67974644504e4ea9bde593c1