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

Question

I'm trying to write "modern" js and avoid callbacks and promise by using async/await. However, I must not fully understand how it works. I thought the "next" function would wait until for first function had completed before running.

In my application the four functions are all ajax calls to a MySQL DB to updated records and to select other data and build a new html table to be written to the DOM.

The four functions are finishing in random order which causes the interface to be incorrect. Refreshing the entire page fixes the issue, but if the functions would just run and finish in the order I defined, the interface would be correct.

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

reloadAllTable(workOrderId,statusId);

Answer 1

I just came upon this, but better answered late than never for anyone else who finds this question.

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.

Your issue here is probably that to use async/await synxtax, the function being called must return a promise. If there is no promise to await resolution, then execution continues to the next statements. As you've stated above, these functions do not return a promise, and subsequently don't load in the desired order.

For the code to execute in the order you've specified, you'd need to modify your functions to return a promise. If the AJAX call returns a thenable you could possibly convert it into a promise, and await that promise:

Promise.resolve( yourThenable )

For a function which follows node-callback style, one way of doing this is through the promisify-node module ( 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);
});