#npm 包 promise-extended 使用教程
在现代的前端开发中,异步操作如此普遍,而 JavaScript 的回调函数却常常使得代码难以理解和维护。为了解决这个问题,Promise 对象应运而生。Promise 通过使用链式调用和错误处理,使得异步代码变得简洁易懂。
然而,原生的 Promise 对象也有其不足之处。例如,当多个 Promise 实例需要串联时,不同的 Promise 形成的链会导致代码缩进层数过深,降低了可读性。此时,我们需要使用 promise-extended 这个 npm 包。
#什么是 promise-extended
promise-extended 封装了原生的 Promise 对象,同时提供了许多方便的方法。这些方法可以使得我们的异步操作更加强大和高效。promise-extended 支持链式调用,提高代码可读性和可维护性。
#安装 promise-extended
可以使用 npm 安装 promise-extended 。
npm i promise-extended
#promise-extended 的基本用法
使用 promise-extended 只需把封装了 Promise 的类实例化,然后调用方法即可。
const promiseExtended = require('promise-extended'); const promise = new promiseExtended();
接下来,我们将介绍 promise-extended 一些常用方法,包括串联多个 Promise、设置并发数、设置超时等等。
#串联多个 Promise
如果不使用 promise-extended ,当我们需要串联多个 Promise 时,代码可能会变得非常庞大和难以维护。
-- -------------------- ---- ------- --- ---------------- --------- ------- - ------------------- -- - --------------------- ---------- -- ------ ---------------- -- - ------ --- ---------------- --------- ------- - ------------------- -- - --------------------- ---------- -- ------ --- ---------------- -- - ------ --- ---------------- --------- ------- - ------------------- -- - --------------------- ---------- -- ------ --- ---
使用 promise-extended 可以让我们的代码变得更加简洁。
const promiseExtended = require('promise-extended'); const promise = new promiseExtended(); promise .then(() => console.log('第一个任务')) .then(() => console.log('第二个任务')) .then(() => console.log('第三个任务'));
#设置并发数
默认的 Promise 相当于在使用 Promise.all ,当有一个 Promise 失败时,整个链都会失败。这有时候会导致一些问题。例如, 当我们需要调用数十个 API ,但是其中几个API由于某种原因失败了,但是我们依然希望其他API可以正常返回。
promise-extended 支持设置 Promise 的并发数,即同一时间允许执行多少个 Promise 。设置并发数可以避免上述问题,提高异步代码的可靠性。
-- -------------------- ---- ------- ----- --------------- - ---------------------------- ----- ------- - --- ------------------ ----- ---- - - ----------------------------------------------- ----------------------------------------------- ----------------------------------------------- ------------------------------------------------- ------------------------------------------------- ------------------------------------------------- ------------------------------------------------- ------------------------------------------------- ------------------------------------------------ -- ------------------- ----- -- ------------------- -- ------------ ------------------ --------------------- ----------- -- ---------------------
在上面的示例中,我们设置了并发数为 3 ,同一时间最多允许执行三个 Promise 。fetch(url).then(res => res.json()) 是我们需要执行的 Promise 参数。queue 方法会等待当前 Promise 任务执行完成后再执行下一个。
如果没有设置并发数,则当前 Promise 完成后,会立刻执行下一个 Promise。
#设置超时时间
promise-extended 支持设置 Promise 超时时间,当 Promise 超时时,可以指定 Promise 返回的值或者执行错误处理方法。
-- -------------------- ---- ------- ----- --------------- - ---------------------------- ----- ------- - --- ------------------ ----- ----------- - -- -- - ------ --- ----------------- ------- -- - ------------- -- - ------------------ ---------- ----------- ------- ----- -- ------ --- -- ------------------------------ ----- ------ ------------------ ----------------------
在上面的示例中,我们创建了一个慢速 Promise ,该 Promise 需要 3 秒钟才能完成。然后我们通过调用 timeout 方法来设置 Promise 超时时间为 1 秒钟。由于超时,Promise 返回的结果为 '超时了'。
#promise-extended 的更多方法
除了以上的方法,promise-extended 还提供了一些很有用的方法。
allSettled 方法
该方法等价于 Promise.allSettled ,但是该方法只有在 Promise 集合中所有 Promise 完成后才会返回 。allSettled 方法返回一个 Promise ,该 Promise 会在所有 Promise 完成后执行。
-- -------------------- ---- ------- ----- --------------- - ---------------------------- ----- ------- - --- ------------------ ----- -------- - - ------------------- ------------------- ------------------------ ------------------ -- ---------------------------- ------------------ ----------------------
filter 方法
该方法可以过滤 Promise 成功的结果。
-- -------------------- ---- ------- ----- --------------- - ---------------------------- ----- ------- - --- ------------------ ----- -------- - - ------------------- ------------------- ------------------- ------------------------ ------------------ -- ------------------------ ------ -- ---- - -- ------------------ ----------------------
some 方法
该方法等价于 Promise.some ,返回一个 Promise ,该 Promise 的值等于集合中处理成功的 Promise 的值。
-- -------------------- ---- ------- ----- --------------- - ---------------------------- ----- ------- - --- ------------------ ----- -------- - - ------------------------ ------------------- ------------------- ------------------- ------------------ -- ---------------------- -- ------------------ ----------------------
我们指定了至少要处理三个成功的 Promise 才会成功。在上面的示例中,1、2、3、4四个 Promise 处理成功,所以该 Promise 被解析。如果我们指定的解析数量大于成功的 Promise 数量,则该 Promise 会被拒绝,否则将得到一个被解析的 Promise 。
race 方法
该方法等价于 Promise.race ,返回一个 Promise ,该 Promise 会在第一个完成的 Promise 处理成功或失败后执行。
-- -------------------- ---- ------- ----- --------------- - ---------------------------- ----- ------- - --- ------------------ ----- -------- - - --- ----------------- ------- -- - ------------------ ----- ---------------- --- --- ----------------- ------- -- - ------------------ ----- ---------------- -- -- ---------------------- ------------------ ----------------------
在上面的示例中,我们创建了两个 Promise ,每个 Promise 都会在指定的时间后失败。由于第一个 Promise 时间比第二个 Promise 时间长,所以返回的结果是第二个 Promise 处理失败时的结果。
#结论
在异步操作频繁的前端开发中,promise-extended 是必备的工具之一。promise-extended 提供了各种有用的方法,使我们的异步操作更加简单、直观和可维护。同时,它还支持链式调用,使得我们的异步代码更加漂亮和易于阅读和理解。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/68366