JavaScript Async/Await không chỉ là một đường cú pháp!!!!

Dec 14 2022
Hiểu về Callbacks, Promises và Async/Await là một phần quan trọng khi làm việc với JavaScript vì JavaScript là Ngôn ngữ lập trình đơn luồng. Có nhiều tài nguyên học tập chuyên sâu giải thích cách hoạt động của Lệnh gọi lại, Lời hứa và Không đồng bộ/Đang chờ trong JavaScript, vui lòng nghiên cứu chúng và quay lại đây.

Hiểu về Callbacks, Promises và Async/Await là một phần quan trọng khi làm việc với JavaScript vì JavaScript là Ngôn ngữ lập trình đơn luồng.

Có nhiều tài nguyên học tập chuyên sâu giải thích cách hoạt động của Lệnh gọi lại, Lời hứa và Không đồng bộ/Đang chờ trong JavaScript, vui lòng nghiên cứu chúng và quay lại đây.

Nhưng ở đây, tôi sẽ chỉ ra cách Async/Await giống với Promise hay chúng ta nên nói Async/Await là Promise như thế nào!

Chúng tôi sẽ minh họa bằng cách sử dụng JavaScript Fetch API vì đây là API dựa trên Lời hứa, Mã đầu tiên sẽ được viết bằng Async/Await và mã kia chỉ được viết bằng Promise mà không có từ khóa Async/Await.

Đối với ví dụ này, chúng tôi sẽ kết nối với điểm cuối Agify.io dự đoán tuổi của một người dựa trên tên của họ, Bây giờ chúng ta hãy bắt đầu.

1) Đầu tiên, với Async/Await đối lưu, chúng tôi chỉ cần tạo một hàm gửi tên của người đó dưới dạng tham số chuỗi truy vấn đến điểm cuối API

async function prediction(name){
    response = await fetch(`https://api.agify.io?name=${name}`)
    person_details= await response.json()
    age=person_details["age"]
    return `Your Age is ${age}`
}

prediction("aisosa").then(console.log) // Output: Your Age is 33

prediction = (name) => new Promise((resolve,reject)=>{
    fetch(`https://api.agify.io?name=${name}`).then((response)=>{
        response.json().then((person_details)=>{
            age=person_details["age"]
            resolve(`Your Age is ${age}`)
        })
    })
})
prediction("aisosa").then(console.log) // Output: Your Age is 33

Tóm lại, JavaScript Async/Await không chỉ là một đường cú pháp, nó là những LỜI HỨA.