JS 异步/等待 vs Promise vs 回调

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

我尝试过使用数组

var array = [1,2,3];

和 2 个功能

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

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

CALLBACK

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

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

PROMISE

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) 异步并调用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在同样的背景下！谢谢

async and await是工具管理承诺

await post(4);

你在这里等待返回的承诺post有待解决。

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

然而，post 不返回承诺，所以它没有任何用处。

你有一个有效的实现post和之前的承诺。所以用它：

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