在前端开发过程中,经常会用到异步代码。而使用异步代码,就不可避免地要处理回调函数。为了解决回调函数导致的“回调地狱”问题,Promise 应运而生。使用 Promise 可以让异步代码更加优雅和可读。而在使用 Promise 的过程中,我们常常需要使用一些常用方法,如:Promise.all(), Promise.race()等等。在本篇文章中,我们将介绍一个非常实用的 npm 包 promiseful,它能够让我们在使用 Promise 的时候更加高效、简约。下面,让我们一起来学习它的使用教程。
什么是 promiseful?
promiseful 是一款优化 Promise API 的 npm 包。它提供了许多实用的方法,如:promiseful.timeout()、promiseful.deferred()、promiseful.delay() 等等。使用 promiseful,我们可以避免手写一些重复的代码,并且让我们的代码看起来更加优雅。
promiseful 的安装
要使用 promiseful,需要在项目中安装 promiseful 包。我们可以使用 npm 进行安装:
npm install promiseful
promiseful 的常用方法
promiseful.timeout(promise, timeout)
设置一个 Promise 的超时时间,如果超时,则会触发一个异常。promise
参数为需要设置超时时间的 Promise 实例;timeout
为超时时间。promiseful.deferred()
创建一个可以手动控制状态的 Promise 实例。返回值是一个包含 resolve 和 reject 方法的对象。可以在需要的时候手动将 Promise 设置为完成状态。promiseful.delay(time)
延迟执行 Promise 的 resolve 回调函数。time
为延迟毫秒数。promiseful.map(array, mapperFunc)
类似于 Array.map() 方法,但适用于 Promise 对象数组。array
参数为 Promise 数组;mapperFunc
为映射函数,它接受一个 Promise 实例作为参数,内部返回一个新的 Promise 实例。promiseful.filter(array, filterFunc)
类似于 Array.filter() 方法,但适用于 Promise 对象数组。array
参数为 Promise 数组;filterFunc
为筛选函数,它接受一个 Promise 实例作为参数,返回一个 bool 值,用于判断 Promise 是否符合条件。
promiseful 的应用
1. 使用 promiseful.timeout() 方法
当我们调用一个异步方法时,如果这个异步方法需要执行很长时间,我们可以使用 promiseful.timeout() 规定一个最大的等待时间,如果异步方法在规定时间内没有返回结果,则抛出一个异步异常。
举个例子,我们在浏览器中调用了一个请求地址的异步方法:
-- -------------------- ---- ------- -------- ---------- - ------ --- ----------------- ------- -- - ----- --- - --- ----------------- --------------- ----- ---------- - -- -- -------------------------- ----------- - -- -- ----------------------- ----------- --- -
现在我们可以使用 promiseful.timeout() 方法来规定一个最大等待时间:
const timeoutFetch = promiseful.timeout(fetch(url), 3000); timeoutFetch.then(response => console.log('response:', response)) .catch(e => console.log(`Error: ${e.message}`));
上面代码中,我们使用 promiseful.timeout() 方法对 fetch(url) 这个异步方法进行了封装,并规定其最大等待时间为 3000 毫秒。这样,当异步请求执行时间超过 3000 毫秒时,将会抛出一个异常。
2. 使用 promiseful.deferred() 方法
promiseful.deferred() 方法返回一个新的 Promise 对象,这个 Promise 对象可以手动设置 resolve 或 reject 状态。这在某些情况下非常实用,比如我们想写一个方法,这个方法能够在自定义的条件下返回一个 Promise 对象。下面是一个例子:
-- -------------------- ---- ------- -------- ------------------ - ----- -------- - ---------------------- -- ---------- -- -------------- - ---------------------- --- ---- -------------- - ---- - ------------------------ ---- -------- - ------ ----------------- -
上面代码中,我们编写了一个 registerUser() 方法。当输入的 user 信息不合法时,我们手动设置这个 Promise 的状态为 reject,当输入的 user 信息符合条件时,我们手动设置这个 Promise 的状态为 resolve。
3. 使用 promiseful.delay() 方法
在某些情况下,我们想要在执行异步操作之前延迟一段时间,比如执行一些动画或者等待 5 秒钟再执行异步操作。这时,我们可以使用 promiseful.delay() 方法。
举个例子,我们想要等待 5 秒之后再执行异步操作:
async function fetchData() { await promiseful.delay(5000); return fetch(url); }
上面代码中,我们使用 async/await 来执行异步操作,在异步执行之前,我们使用 promiseful.delay() 方法设置等待 5 秒之后再执行异步操作。
4. 使用 promiseful.map() 方法
有时候,我们需要遍历一个 Promise 对象数组,并将遍历结果重组成一个新的 Promise 数组。这时,我们可以使用 promiseful.map() 方法。
举个例子,我们有一个 Promise 数组,数组中的每个 Promise 都返回一个数字。现在我们想将这个 Promise 数组中的数字累加,并返回一个新的 Promise 对象:
-- -------------------- ---- ------- ----- -------- - - --- ----------------- ------- -- ------------ --- ----------------- ------- -- ------------ --- ----------------- ------- -- ------------ -- ----- --- - ------------------------ ----- --- -- - ----- --- - ----- -- ------ --- - -- ------------- -- - ----- --- - -------------- -- -- - - --- ----------------- -- - ---
上面代码中,我们使用 promiseful.map() 方法,将数字加 1,然后返回一个新的数组。最后,我们使用 reduce() 方法将数组中的数字累加。
5. 使用 promiseful.filter() 方法
有时候,我们需要使用 Promise 数组进行一些筛选操作。这时,我们可以使用 promiseful.filter() 方法。
举个例子,我们有一个 Promise 数组,数组中每个 Promise 运行后返回一个对象,对象中包含这个 Promise 是否被完成的状态值。现在我们想将数组中未被完成的 Promise 筛选出来:
-- -------------------- ---- ------- ----- -------- - - --- ----------------- ------- -- - ------------- -- - --------- ------- ----- --- -- ------ --- --- ----------------- ------- -- - ------------- -- - --------- ------- ---- --- -- ------ --- --- ----------------- ------- -- - ------------- -- - --------- ------- ----- --- -- ------ --- -- ----- -------- - --------------------------- ----- --- -- - ----- --- - ----- -- ------ ------------ ------------- -- - ----------------- -- -- ------- ----- -- - ------- ----- -- ---
上面代码中,我们使用 promiseful.filter() 方法筛选出未被完成的 Promise,最终将这些未被完成的 Promise 组成一个新的数组返回。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055aa481e8991b448d81e2