时间戳

首页 > 解决方案 > 使用异步调用设计函数回调

javascript - 使用异步调用设计函数回调

问题描述

设计可以在回调函数中使用异步函数的代码时，最佳实践是什么，这是问题的简化视图。

有这个更新函数可以进行一些异步函数调用以将一些数据更新到某种存储。

function update(){
  asyncfn(arg, () => {// Callback code});
}

然后有这两个按钮调用更新功能

Updatebtn.onClick = update;

UpdateDisplaybtn.onClick = () => {
  update();
  displayUpdatedData();
}

第二个按钮会导致问题，因为 displayUpdatedData() 将在 update() 真正完成之前被调用，因为它有一个不会完成的异步函数调用，我也不能在 update() 中指定我自己的回调，因为它是用作 onClick 事件的回调。

我对 Promise 了解不多，但我知道我使用的异步函数不支持它们。

我不是在寻找某种解决方法，而是在寻找这种情况下的最佳实践。

更新

在得知最佳实践是使用 Promises 之后，我使用了 The Coding Train 的这个 YouTube 播放列表“ JavaScript Promises ”来了解它们，这非常好，我想与任何想了解 Promises 的人分享。

标签： javascript

解决方案

因此，如果您正在寻找最佳实践，我强烈建议您熟悉 Promise。Javascript 现在支持 async / await 语法，它允许您等待 Promise 的响应，但您可以或多或少地像普通函数一样编写代码。我知道您说您要使用的异步函数需要回调，并且不支持承诺，但是您可以使用 bluebird 之类的库将基于回调的函数转换为基于承诺的函数（promisify），或者如果您在节点中，它有自己的原生 promisify 功能。

那么你最终会得到这样的结果：

import cbFn from 'cbFn'; //import or require your callback based function
import {promisify} from 'util';

const pFn = promisify(cbFn);

async function update() {
  await pFn()
}

...

UpdateDisplaybtn.onClick = async () => {
  await update();
  await displayUpdatedData() //await only needed if displayUpdatedData is also async / a promise
}

推荐阅读