JS Async/Await vs Promise vs 回调

Question

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

我试过数组

var array = [1,2,3];

和 2 个函数

get() 在 1 秒内执行并控制 array
post(item) 在 2 秒内执行并在 array

现在，我想要得到的是 post 方法应该先执行，然后执行 get，这样控制台上的结果应该是 [1,2,3,4] 而不是 [1,2,3]

回调

function get() {
    setTimeout(() => console.log(array), 1000);
}

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

function init() {
    post(4, get);
    // returns [1,2,3,4] ✅
}

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

承诺

function get() {
    setTimeout(() => console.log(array), 1000);
}

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

function init() {
    post(4).then(get);
    // returns [1,2,3,4] ✅
}

好的，代码更简洁。但是仍然有多个 then 调用...现在，

Async/Await

function get() {
    setTimeout(() => console.log(array), 1000);
}

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

async function init() {
    await post(4);
    get();
    // returns [1,2,3] ❌

    await post(4);
    await get();
    // returns [1,2,3] ❌

    post(4);
    await get();
    // returns [1,2,3] ❌
}

更简洁的版本，但无论哪种方式，它都有效......我也试过这个（将两个函数（post和get）转换为异步并使用[=24=调用])

async function get() {
    setTimeout(() => console.log(array), 1000);
}

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

async function init() {
    post(4).then(get);
    // returns [1,2,3] ❌
}

但是还是没有用。所以我对这个功能感到非常困惑（即 async/await）。请详细说明这个例子。也请告诉我关于 Promise.resolve 和 Promise.all 在同一上下文中的情况！谢谢

Answer 1

类似于您在 PROMISE 中所做的。

将 post setTimeout 包装在一个承诺中并 return 它。
在 settimeout 的主体内调用 resolve。

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

然后你就可以这样使用了:

async function init() {
    await post(4);
    get();
    }

Answer 2

async 和 await 是 管理 promises

的工具

await post(4);

您在这里等待 post 编辑的承诺 return 得到解决。

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

但是，post return 不是承诺，所以它没有任何用处。

您之前有一个承诺的 post 的有效实现。所以使用那个：

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

Answer 3

您对 async 和 await 的尝试未使用任何在延迟延迟后解决承诺的内容。就目前而言，您定义的所有 async 函数，return 立即解决的承诺。

你会想要使用一个你可以经常使用的实用函数。它 return 是一个在给定的毫秒数后解决的承诺，使用 setTimeout:

// utility function
let delay = ms => new Promise(resolve => setTimeout(resolve, ms));

let array = [1, 2, 3];

async function get() {
    await delay(1000);
    console.log(array);
}

async function post(item) {
    await delay(1000);
    array.push(item)
}

async function init() {
    await post(4);
    await get();
}

init();
console.log("wait for it...");

JS Async/Await vs Promise vs 回调

JS Async/Await vs Promise vs Callbacks

javascript

callback

node.js

promise

async-await