Функции async/await не ожидают Несколько функций не запускаются и не завершаются по порядку

Question

Я пытаюсь писать "современные" js и избегать обратных вызовов и обещаний, используя async / await. Однако я не должен полностью понимать, как это работает. Я думал, что "следующая" функция будет ждать, пока первая функция не будет завершена, прежде чем работать.

В моем приложении все четыре функции - это вызовы ajax в БД MySQL для обновления записей и выбора других данных и создания новой 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 вызываемая функция должна возвращать обещание. Если нет обещания ждать разрешения, то выполнение продолжается до следующих операторов. Как вы указали выше, эти функции не возвращают обещание и впоследствии не загружаются в нужном порядке.

Чтобы код выполнялся в указанном вами порядке, вам нужно изменить свои функции, чтобы вернуть обещание. Если AJAX-вызов возвращает возвращаемое значение, вы можете преобразовать его в обещание и дождаться этого обещания:

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);
});