JS Async / Await vs Promise vs Callbacks

Question

Tôi đang cố gắng tìm hiểu sự khác biệt giữa 3. Callbacks & Promises rất rõ ràng nhưng tôi không hiểu cách sử dụng async / await. Tôi biết đó là cú pháp của lời hứa nhưng những gì tôi đã thử không thành công. Tôi đang chia sẻ đoạn mã mà tôi đã cố gắng hiểu tất cả điều này ...

Tôi đã thử với một mảng

var array = [1,2,3];

và 2 chức năng

• get() thực thi trong 1 giây và điều khiển array
• post(item) thực hiện trong 2 giây và đẩy một mục mới trong array

Bây giờ, những gì tôi muốn nhận được là postphương thức phải thực thi trước và getsau nó để kết quả trên bảng điều khiển [1,2,3,4]không[1,2,3]

GỌI LẠI

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

Nó hoạt động tốt nhưng trong trường hợp có quá nhiều lệnh gọi lại, mã sẽ lộn xộn hơn ... Vì vậy,

LỜI HỨA

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 với mã sạch hơn nhiều. Nhưng vẫn có nhiều thencuộc gọi ... Bây giờ,

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

Phiên bản sạch hơn nhiều nhưng không có cách nào, nó hoạt động ... Tôi cũng đã thử điều này (chuyển đổi cả hai hàm ( post& get) thành không đồng bộ và gọi bằng 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] ❌
}

Nhưng vẫn không sử dụng được. Vì vậy, tôi hoàn toàn bối rối về tính năng này (tức là async / await). Vui lòng giải thích thêm về ví dụ này. Và cũng xin vui lòng cho tôi biết về Promise.resolve& Promise.alltrong cùng bối cảnh này! Cảm ơn

Answer 1

asyncvà awaitlà công cụ để quản lý lời hứa

await post(4);

Ở đây bạn đang chờ đợi lời hứa trả về postđược giải quyết.

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

Tuy nhiên, post không trả lại một lời hứa , vì vậy nó không có ích gì.

Bạn đã có một triển khai hiệu quả postvới một lời hứa trước đây. Vì vậy, hãy sử dụng:

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

Answer 2

Nỗ lực của bạn với asyncvà awaitkhông sử dụng bất cứ điều gì giải quyết một lời hứa sau một thời gian trì hoãn . Như hiện tại, tất cả các asyncchức năng bạn đã xác định, trả về một lời hứa sẽ giải quyết ngay lập tức.

Bạn sẽ muốn sử dụng một chức năng tiện ích mà bạn có thể sử dụng thường xuyên. Nó trả về một lời hứa sẽ giải quyết sau một số mili giây nhất định, sử dụng 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

Tương tự như những gì bạn đã làm trong PROMISE .

Kết thúc bài đăng setTimeout trong một lời hứa và gửi lại.
gọi giải quyết bên trong nội dung của thời gian chờ.

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

thì bạn có thể sử dụng nó như vậy:

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

---