async / await函数不等待。 多个功能无法按顺序运行和完成

Question

我正在尝试编写“现代”js并通过使用async / await来避免回调和承诺。 但是，我不能完全理解它是如何工作的。 我认为“下一个”功能会等到第一个功能在运行之前完成。

在我的应用程序中，这四个函数都是对MySQL数据库的ajax调用，以更新记录并选择其他数据并构建一个新的html表来写入DOM。

这四个函数以随机顺序完成，导致界面不正确。 刷新整个页面可以解决问题，但如果函数只按我定义的顺序运行和完成，那么界面就是正确的。

async function reloadAllTable(workOrderId,statusId) {
    await techSelectTable(workOrderId);
    await updateWOStatus(workOrderId,statusId);
    await loadWOScheduled(statusId);
    await loadWOAssigned(statusId);
}

reloadAllTable(workOrderId,statusId);

Answer 1

我刚刚发现了这个问题，但对于发现这个问题的其他人来说，最好的答案要迟到。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

异步函数可以包含await表达式，它暂停执行异步函数并等待传递的Promise的解析，然后恢复异步函数的执行并返回已解析的值。

你的问题可能就是使用async / await synxtax，被调用的函数必须返回一个promise。 如果没有承诺等待解决，则继续执行下一个语句。 如上所述，这些函数不会返回承诺，并且随后不会按所需顺序加载。

要使代码按照您指定的顺序执行，您需要修改函数以返回promise。 如果AJAX调用返回一个thenable，你可以将它转换成一个promise，并等待该promise：

Promise.resolve( yourThenable )

对于遵循节点回调样式的函数，一种方法是通过promisify-node模块（ https://www.npmjs.com/package/promisify-node ）：

var promisify = require("promisify-node");

function myCallbackFunction(callback) {
  callback(null, true);
}

// Convert the function to return a Promise. 
var wrap = promisify(myCallbackFunction);

// Invoke the newly wrapped function. 
wrap().then(function(value) {
console.log(value === true);
});