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

Posted 2023-03-14

【中文标题】async/await 函数不等待。多个功能不按顺序运行和完成

【英文标题】：async/await functions not waiting. Multiple functions don't run and finish in order

【发布时间】：2017-09-11 07:32:50

【问题描述】：

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

在我的应用程序中，这四个函数都是对 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);

【问题讨论】：

你在等待一个承诺。这些函数中的任何一个都返回承诺吗？如果没有，那是你的问题。

没有。它们都是处理数据库记录的ajax例程，但这些过程必须按顺序发生。

你如何期望 JS 知道他们什么时候完成？例如是否techSelectTable 完成后通常会调用传入的回调什么的？

【参考方案1】：

我刚发现这个问题，但对于发现这个问题的其他人来说，迟到总比没有好。

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

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

您的问题可能是要使用 async/await 语法，被调用的函数必须返回一个承诺。如果没有承诺等待解决，则继续执行下一条语句。正如您在上面所说，这些函数不会返回承诺，因此不会以所需的顺序加载。

要按照您指定的顺序执行代码，您需要修改函数以返回一个承诺。如果 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);
);