JS 异步/等待 vs Promise vs 回调

Question

我试图理解这 3 个回调和承诺之间的区别，但我不明白 async/await 的用法。我知道这是承诺的语法糖，但我尝试过的方法没有用。我正在分享我试图理解这一切的一段代码......

\n

我尝试过使用数组

\n

var array = [1,2,3];\n

\n

和 2 个功能

\n

\n
• get()1 秒内执行并控制台array
\n
• post(item)2 秒内执行并推送一个新项目array
\n

\n

现在，我想要得到的是该post方法应该首先执行并get在其之后执行，以便控制台上的结果[1,2,3,4]不应该是[1,2,3]

\n

打回来

\n

var array = [1,2,3];\n

\n

它工作正常，但如果回调太多，代码会更混乱......所以，

\n

承诺

\n

function get() {\n    setTimeout(() => console.log(array), 1000);\n}\n\nfunction post(item, callback) {\n    setTimeout(() => {\n        array.push(item);\n        callback();\n    }, 2000);\n}\n\nfunction init() {\n    post(4, get);\n    // returns [1,2,3,4] \xe2\x9c\x85\n}\n

\n

好的，代码更简洁。但仍然多次then致电...现在，

\n

异步/等待

\n

function get() {\n    setTimeout(() => console.log(array), 1000);\n}\n\nfunction post(item) {\n    return new Promise((resolve, reject) => setTimeout(() => {\n        array.push(item)\n        resolve();\n    }, 2000));\n}\n\nfunction init() {\n    post(4).then(get);\n    // returns [1,2,3,4] \xe2\x9c\x85\n}\n

\n

更干净的版本，但无论哪种方式，它都有效...我也尝试过这个（将两个函数（post& get）转换为异步并调用then）

\n

function get() {\n    setTimeout(() => console.log(array), 1000);\n}\n\nfunction post(item) {\n    setTimeout(() => {\n        array.push(item)\n    }, 2000);\n}\n\nasync function init() {\n    await post(4);\n    get();\n    // returns [1,2,3] \xe2\x9d\x8c\n\n    await post(4);\n    await get();\n    // returns [1,2,3] \xe2\x9d\x8c\n\n    post(4);\n    await get();\n    // returns [1,2,3] \xe2\x9d\x8c\n}\n

\n

但还是没有用。所以我对这个功能（即异步/等待）完全感到困惑。请详细说明这个例子。并且请告诉我在同一背景下的Promise.resolve& ！Promise.all谢谢

\n

Answer 1

async是管理承诺await的工具

await post(4);

在这里你等待返回的promise被post解决。

function post(item) {
    setTimeout(() => {
        array.push(item)
    }, 2000);
}

然而，post 它不返回一个promise，所以它没有做任何有用的事情。

post您之前已经有过一个可以正常工作的承诺实现。所以用它：

function post(item) {
    return new Promise((resolve, reject) => setTimeout(() => {
        array.push(item)
        resolve();
    }, 2000));
}