专业的编程技术博客社区

网站首页 > 博客文章 正文

浅析 JavaScript 中的 Promise(js promise的作用)

baijin 2024-10-11 10:46:55 博客文章 15 ℃ 0 评论

Promise 是学习 ES6 不可避开的技术点之一,本文将给大家介绍 Promise 最重要的几个常用的 API,帮助大家更好地理解它。?

?创建 Promise

我们先来看一下 Promise 的签名函数:

new Promise( /* executor */ function(resolve, reject) { ... } );

Promise 的构造器接受一个名称为 executor 的函数,而 executor 函数接受两个参数: resolve 和 reject,并且这两个参数也都是函数。一般而言,使用 Promise 可以让我们更加方便地处理一些比较耗时的任务,例如文件操作、API 调用、数据库调用等,而 executor 函数就是用来执行这些耗时任务的。如果任务执行成功,那么执行的结果通过 resolve 函数进行回调,如果任务执行失败,那么执行的结果通过 reject 函数进行回调。

让我们在 Promise 中模拟一个耗时的任务,该任务 10 秒之后才会返回相应的结果:?

?下面这幅图是 Promise 刚刚创建完成时候,对应的内部 PromiseStatus 状态和 PromiseValue 的值,我们可以看到一开始 Promise 的状态处于 pending 状态。?

?下面这幅图是 10 秒过后 Promise 的运行情况,我们可以看到 PromiseStatus 变为了 resolved,相应的 PromiseValue 也变成了 resolve 函数一开始传入的参数值。?

?相应的,如果我们在上述代码中使用的是 reject 函数回调的结果,那么最后 Promise 的状态 PromiseStatus 将会变为 rejected 状态。

由此,我们了解到 Promise 总共有三种状态:pending、resolved 和 rejected。

Promise 对象的原型方法

有三个方法在 Promise 的原型上,它们返回的都是 Promise 这个对象本身:

  • Promise.prototype.catch(onRejected)
  • Promise.prototype.then(onFulfilled, onRejected)
  • Promise.prototype.finally(onFinally)

我们结合下面这幅图来看这三个方法的调用流程:?

?最开始 Promise 出于 pending 状态,当内部的耗时任务处理成功之后,就会调用 .then(onFulfillment) 回调;如果内部的耗时任务处理失败之后,其会对 .then(onFullfillment, onRejected) 的第二个参数 onRejected 函数进行回调,也会对 .catch(onRejection) 函数进行回调,用来让用户进行错误处理。

Promise 耗时任务的成功调用链:?

?Promise 耗时任务的失败调用链:?

?如果在调用链上添加了 .finally 回调,那么无论调用成功还是失败,都会对 .finally 进行回调。

Promise 对象的静态方法

Promise 共有 4 个静态方法,它们返回的同样也都是 Promise 对象本身。我们先来看前两个方法:

  • Promise.reject(reason)
  • Promise.resolve(value)

这两个方法都是帮助方法,帮助开发者直接创建状态为 rejected 或 resolved 的 Promise,并没有太多可介绍的点。而剩下的这两个方法用来帮助开发者处理多个 Promise,有些情况下非常有用:

  • Promise.all(iterable)
  • Promise.race(iterable)

其中 Promise.all 方法返回一个 Promise,这个 Promise 会在 iterable 中的所有耗时任务全都执行成功才会返回。 以如下代码为例:?

?上面代码定义了三个耗时任务,它们被依次放在了 promisesArray 中,当使用 Promise.all 成功解析这三个任务之后,values 数组会按照顺序依次存储对应的耗时任务的结果。如果这三个任务有任意一个返回失败 (rejected) 状态,那么 Promise 就不会调用 then 回调,转而直接调用 catch 来通知用户处理错误。

我们在这个地方还打印了这三个任务总共执行时间,我们发现大概是 40005 毫秒左右,约等于最长的耗时任务 4 秒,这表明这几个耗时任务是同时被浏览器进行处理的,它们是并行运行的。?

?Promise.race 方法会在这几个耗时任务,有任意一个成功执行或执行失败的时候进行返回。即,这几个耗时任务执行时间最短的任务将会被返回,不管它成功了还是失败了。成功就调用 .then 回调,失败就调用 .catch 回调。

总结

  • Promise 对象上的所有方法返回的类型依旧是 Promise 对象
  • resolve 方法对应的是 then,reject 方法对应的是 catch
  • 我们可以在一个 Promise 对象上添加任意多个处理器

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表