javascript - async/await 函数不等待。多个函数未按顺序运行和完成

Question

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

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

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

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

An async function can contain an await expression, that pauses the execution of the async function and waits for the passed Promise's resolution, and then resumes the async function's execution and returns the resolved value.

您的问题可能是要使用 async/await 语法，被调用的函数必须返回一个 promise 。如果没有 promise 等待解决，则继续执行下一条语句。正如您上面所说，这些函数不会返回 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);
});