JS Async / Await vs Promise vs Callbacks

Question

Saya mencoba untuk memahami perbedaan antara 3. Callbacks & Promises sudah jelas tetapi saya tidak mendapatkan penggunaan async / await. Saya tahu itu adalah gula sintaksis dari janji tetapi apa yang saya coba tidak berhasil. Saya membagikan potongan kode yang telah saya coba untuk memahami semua ini ...

Saya sudah mencoba dengan array

var array = [1,2,3];

dan 2 fungsi

• get() dijalankan dalam 1 detik & konsol array
• post(item) dijalankan dalam 2 detik & dorong item baru di array

Sekarang, yang ingin saya dapatkan adalah postmetode tersebut harus dijalankan terlebih dahulu & getsetelahnya sehingga hasil di konsol seharusnya [1,2,3,4]tidak[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] ✅
}

Ini berfungsi dengan baik tetapi jika terlalu banyak panggilan balik, kode akan menjadi lebih berantakan ... Jadi,

JANJI

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

Ok dengan kode yang lebih bersih. Tapi masih banyak thenpanggilan ... Sekarang,

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

Versi yang jauh lebih bersih tetapi tidak berhasil, itu berhasil ... Saya juga mencoba ini (mengonversi kedua fungsi ( post& get) menjadi asinkron dan memanggil dengan 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] ❌
}

Tapi tetap tidak ada gunanya. Jadi saya benar-benar bingung tentang fitur ini (yaitu async / await). Tolong uraikan contoh ini. Dan juga tolong beri tahu saya tentang Promise.resolve& Promise.alldalam konteks yang sama ini! Terima kasih

Answer 1

asyncdan awaitmerupakan alat untuk mengelola janji

await post(4);

Di sini Anda menunggu janji dikembalikan postuntuk diselesaikan.

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

Namun, post tidak mengembalikan janji , jadi tidak ada gunanya.

Anda memiliki implementasi yang berfungsi postdengan janji sebelumnya. Jadi gunakan itu:

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

Answer 2

Upaya Anda dengan asyncdan awaittidak menggunakan apa pun yang menyelesaikan janji setelah penundaan . Seperti berdiri, semua asyncfungsi yang telah Anda tentukan, mengembalikan janji yang segera diselesaikan.

Anda pasti ingin menggunakan fungsi utilitas yang sering Anda gunakan. Ini mengembalikan janji yang diselesaikan setelah sejumlah milidetik, menggunakan 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...");

Answer 3

Mirip dengan apa yang Anda lakukan di PROMISE .

Bungkus pos setTimeout dengan sebuah janji dan kembalikan.
panggilan menyelesaikan di dalam tubuh settimeout tersebut.

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

maka Anda bisa menggunakannya seperti itu:

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

---