如何使用 async await 退出不确定时间的回调函数？
在使用 async await 编写异步代码时，有时会出现需要从不确定时间的回调函数中退出的情况。通常情况下，常规的 promise 写法可以使用 then() 链式调用来退出，但 async await 写法没有直接的退出方式。
例如，如下代码中的函数 a 使用 promise 写法，其中回调函数 callback 可以监听按钮属性的变化，并通过 resolve() 触发退出函数：
const a = (): promise => { return new promise((resolve) => { const callback = (mutations: mutationrecord[]) => { // 监听按钮的某个属性变化，此处退出函数 resolve(); }; const observer = new mutationobserver(callback); observer.observe(buttonel, { attributes: true, }); // 调用一个 promise 函数，成功后触发按钮的点击事件，然后监听按钮的属性变化 p().then(() => { buttonel.click(); }); });};
然而，如果将 a 函数改写成 async await 写法（即函数 b），就无法直接通过 resolve() 来退出回调函数：
const b = async (): promise => { const callback = (mutations: mutationrecord[]) => { // 监听按钮的某个属性变化，怎么在此处退出函数？ }; const observer = new mutationobserver(callback); observer.observe(buttonel, { attributes: true, }); // 调用一个 promise 函数，成功后触发按钮的点击事件，然后监听按钮的属性变化 await p(); buttonel.click();};
针对上述问题，目前可以采用比较新的 promise.withresolvers() 接口来实现退出。该接口处于 stage-4 阶段，它可以创建一个 promise，并提供对应的 resolve 和 reject 回调函数：
const b = async (): Promise => { const { promise, resolve } = Promise.withResolvers() const callback = (mutations: MutationRecord[]) => { resolve(); }; const observer = new MutationObserver(callback); observer.observe(buttonEl, { attributes: true, }); // 调用一个 Promise 函数，成功后触发按钮的点击事件，然后监听按钮的属性变化 await p(); buttonEl.click(); // 下面这句也可以用 return promise，取决于你的后续逻辑 await promise};
使用 promise.withresolvers() 接口，可以在回调函数中通过调用 resolve() 来触发 promise 的完成。这样就实现了从不确定时间的回调函数中退出 async await 函数的目的。
需要注意的是，promise.withresolvers() 接口目前尚未得到广泛支持，如果你需要兼容旧的浏览器，可能需要更新 core-js。此外，如果你使用了 typescript，需要将 ts 更新到 5.4 或以上，并在 tsconfig.json 文件中确保 lib 选项包含 esnext。
以上就是Async/Await中如何优雅地退出不确定时间的回调函数？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1498137.html
微信扫一扫 
支付宝扫一扫 
