时间戳

首页 > 解决方案 > JS Async/Await vs Promise vs Callbacks

javascript - JS Async/Await vs Promise vs Callbacks

问题描述

我试图理解这 3 个之间的区别。回调和承诺很清楚，但我没有得到异步/等待的用法。我知道这是承诺的语法糖，但我尝试过的没有奏效。我正在分享我试图理解这一切的一段代码......

我试过一个数组

var array = [1,2,3];

和 2 个功能

现在，我想要得到的是该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电话......现在，

异步/等待

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）转换为 async 并调用 with then）

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] ❌
}

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

标签： javascriptnode.jspromiseasync-awaitcallback

解决方案

async并且await是管理承诺的工具

await post(4);

在这里，您正在等待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));
}

推荐阅读