前言
在JavaScript编程中,promise是一种解决异步编程的强大工具。它可以通过链式调用实现非常可读且可维护的代码,但是,当遇到一些问题时,如何快速调试或排除promise正在处理的值,这是我们面对的另一个问题!
幸运的是,我们有一个npm包promise-peek
,可以帮助开发者轻松地了解promise正在处理的中间值,这可能会使我们的开发时光变得更加流畅!
promise-peek是什么?
promise-peek
是一个Promise实例的代理,可以在进行promise解决/拒绝之前或之后拦截并观察promise正在处理的中间状态。它通过伪造promise实例并在链式调用时劫持对Promise方法的调用来实现它的工作。当开发者调用解决或拒绝时,代理负责传递处理给原始promise,并将值回传给下一个promise解决或拒绝。
promise-peek的优势
- 快速调试promise异步程序
- 可以到达promise值但引发拒绝错误时,可以用它来快速找到引发的错误
注册方式
安装promise-peek
:
npm i promise-peek
在您的应用程序中导入它:
const promisePeek = require('promise-peek');
API
promisePeek.poke(promise, peekCallback)
类型:
Function
参数:
- promise (Promise): 要检查的Promise实例
- peekCallback (Function): 当解决或拒绝时调用的回调函数。该回调会接受该promise的值,返回值会传递给下一个解决或拒绝。
返回值: 返回一个Promise实例,基本上就是promise实例的克隆
下面是一个基本的用法示例:
const pokePromise = promisePeek.poke(new Promise((resolve, reject) => { // Do some async task setTimeout(() => { resolve("I'm resolved"); }, 2000); }), v => console.log(v)); pokePromise.then(v => console.log(`Finisned with ${v}`)).catch(e => console.error(e));
这个例子演示了如何使用promisePeek
来包装一个Promise
实例并监视值的解决/拒绝。回调函数在成功解决时打印值到控制台。
当我们运行该脚本时,我们将获得以下输出:
"I'm resolved" "Finisned with I'm resolved"
使用案例
监视promise状态
在控制台或其他位置输出promise状态可以帮助我们编写复杂的promise链式调用,避免一些恼人错误。我们可以在回调中将promise状态打印到控制台,为我们提供更多关于内在程序状态的信息,然后再继续链式任务。
下面是一个简单的使用示例,输出保持等待状态的promise并在网页控制台中打印输出。
-- -------------------- ---- ------- ----------------- -- -- --- ------------- ----- ----------- - -------------------- ----------------- ------- -- - ------------- -- - -------------- ---- ------ --------- ----------- ------- ---------- -- ------ -------------- ------- ----------- ---- ------------------- -- ------------------
在这个例子中,我们创建了一个模拟异步任务的Promise,它将保持等待状态一段时间,然后解决,并打印一些其他信息。通过调用promisePeek.poke
函数创建一个promise的代理并传入回调监听器,这个例子打印了代理状态的所有信息。
如此, 开发人员可以快速诊断promise状态,以便在发生错误时进行故障排除。
调试错误promise
通常情况下,指定任务并依次处理任务可以保证整个系统的逻辑。但是,在旧式的回调编程中,很常见发生的错误很难定位。在使用promise和async / await等异步编程时,调试已经改善了很多,但是当你感到困惑时,你可以使用promise-peek来帮助你找到错误。
下面是一个简单的使用示例,显示promise被拒绝:
console.log('We are waiting for an required library'); const pokePromise = promisePeek.poke(AwesomeLibrary.fetchVitalInfo()); pokePromise .then(v => console.log(`Your data: ${JSON.stringify(v)}, All Ok!`)) .catch(e => console.error(`Error fetching your data: ${e}`));
在这个例子中,我们试图使用promise调用来获取必要的数据,但是很可能库无法加载或从服务器获取数据时出现错误。通过调用promisePeek.poke
函数创建一个promise的代理,我们可以捕获该数据并在声明错误之前查找引发错误的位置发生了什么。
小结
promise-peek
在我们的JavaScript异步编程中是一个很有价值的桥梁,它帮助我们了解promise的运行中的中间值,以及调试promise过程中的问题。它是一个轻量级、易于使用、灵活性高的扩展包,是我们开发过程中不可或缺的利器!
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60056ce781e8991b448e69ad