使用异步调用设计功能回调

Question

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

---

有此更新函数可以使某些异步函数调用以将某些数据更新为某种存储。

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

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

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

第二个按钮将引起问题，因为displayupdateddata((将在update((真正完成之前调用，因为它具有将无法完成的异步函数调用，而且我也无法在Update((中指定我自己的回调((因为它被用作对OnClick事件的回调。

我对承诺不太了解，但是我知道我使用的异步功能不支持它们。

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

---

update

得知最佳实践是在使用承诺之后，我使用了编码列车的YouTube播放列表" JavaScript Promises"来了解它们非常好，我想与任何想了解承诺的人分享。

Answer 1

如果您使用的是仅接受回电的函数，则可以将其包装在承诺中，以便您可以利用async/await。如果该功能已经返回承诺，则可以只使用async/await而无需包装它。

这样做，您仍然可以通过简单地将它们放入async函数并awaiting来实现update和displayUpdatedData功能的顺序执行。

function callbackFunction (cb) {
  // ... stuff is happening
  cb('Data from the callback func');
}
async function update() {
  return new Promise( (resolve, reject) => {
    callbackFunction( (data) => {
      resolve(data); // or reject(); if failure
    });
    
  });
}
const doThings = async () => {
  const result = await update();
  console.log(result);
  // TODO: Display data from the result
};
doThings();

Answer 2

因此，如果您正在寻找最佳实践，我强烈建议您熟悉承诺。JavaScript现在支持异步/等待语法，该语法使您可以等待承诺的响应，但可以或多或少地像普通函数一样编写代码。我知道您是说您要使用的异步函数需要回调，并且不支持承诺，但是您可以使用诸如bluebird之类的库，或者如果您在节点中，或它具有自己的本地诺言功能。

因此，您最终会得到类似的东西：

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
}