提问者:小点点

JS Async/Await vs Promise vs Callback


我试着去理解这三个之间的区别。回调(&P;承诺是明确的,但我不知道async/await的用法。我知道这是句法上的甜言蜜语,但我所尝试的并不奏效。我在分享我试图理解这些的代码。。。

我试过用数组

var array = [1,2,3];

和2个函数

  • get()在1秒内执行&控制台数组
  • POST(项目)在2秒内执行(&C;在数组
  • 中推送新项

现在,我想要得到的是post方法应该首先执行&;在其后面获取,以便控制台上的结果应该是[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] ✅
}

可以使用更干净的代码。但仍有多个the调用。。。现在,

异步/等待

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)转换为异步并使用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.all在同一上下文中!谢谢


共1个答案

匿名用户

将post setTimeout包装在promise中并返回它。在SetTimeout的正文中解析。