Javascript 使用异步调用设计函数回调

在设计可以在回调函数中使用异步函数的代码时，最佳做法是什么？下面是问题的简化视图

---

有这样一个更新函数，它进行一些异步函数调用，以将某些数据更新到某种存储中

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

然后有两个按钮来调用update函数

Updatebtn.onClick = update;

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

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

我不太了解承诺，但我知道我使用的异步函数不支持承诺

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

---

更新

---

在了解到最佳实践是使用承诺后，我在编码培训中使用了这个YouTube播放列表“”来了解承诺，这非常好，我想与任何想要了解承诺的人分享。

因此，如果您正在寻找最佳实践，我强烈建议您熟悉承诺。Javascript现在支持async/await语法，它允许您等待承诺的响应，但让您编写代码时或多或少像编写普通函数一样。我知道您是说想要使用的异步函数需要回调，并且不支持承诺，但是您可以使用诸如bluebird之类的库将基于回调的函数转换为基于承诺的函数（promisify），或者如果您在node中，它有自己的本机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
}

---

如果您使用的函数只接受回调，则可以将其包装在承诺中，以便利用

async

/

wait

。如果函数已经返回了一个承诺，您可以只使用

async

/

wait

，而不必包装它

通过这种方式，只需将

更新

和

显示更新数据

函数放在

异步

函数中并等待它们，

即可顺序执行
更新
和
显示更新数据
函数


函数调用函数（cb）{
//……事情正在发生
cb（“来自回调函数的数据”）；
}
异步函数更新（）{
返回新承诺（（解决、拒绝）=>{
callbackFunction（（数据）=>{
解析（数据）；//或拒绝（）；如果失败
});
});
}
const doThings=async（）=>{
const result=等待更新（）；
控制台日志（结果）；
//TODO:显示结果中的数据
};
doThings（）
你能不能把
UpdateDisplaybtn.onClick
的匿名函数也变成
async
函数，然后
wait
调用
update（）
调用？我不会使用“语法糖”（TypeScript术语）
async
/
await
是100%本机JS语法。已更新。我仍然习惯于从异步/等待的Transpiler的角度来考虑它