JavaScript Async/Await ไม่ใช่แค่ Syntactic Sugar !!!!

การ ทำความเข้าใจCallbacks, Promises และ Async/Awaitเป็นส่วนสำคัญในการทำงานกับ JavaScript เนื่องจาก JavaScript เป็นภาษาการเขียนโปรแกรมแบบเธรดเดียว

มีแหล่งข้อมูลการเรียนรู้เชิงลึกมากมายที่อธิบายว่าJavaScript Callbacks, Promises และ Async/Awaitทำงานอย่างไร อย่าลังเลที่จะศึกษาและกลับมาที่นี่

แต่ที่นี่ ฉันจะแสดงให้เห็นว่า Async/Await เหมือนกับ Promises อย่างไร หรือเราควรจะบอกว่า Async/Await เป็น Promises อย่างไร!

เราจะสาธิตการใช้ JavaScript Fetch API เนื่องจากเป็น API ตามสัญญา โค้ดแรกจะเขียนโดยใช้ Async/Await และอีกอันเขียนด้วย Promises เท่านั้นโดยไม่มีคีย์เวิร์ด Async/Await

สำหรับตัวอย่างนี้ เราจะเชื่อมต่อกับจุดสิ้นสุดของ Agify.io ซึ่งคาดการณ์อายุของบุคคลตามชื่อของพวกเขา ทีนี้มาเริ่มกันเลย

1) อันดับแรก ด้วย Convectional Async/Await เราเพียงแค่สร้างฟังก์ชันที่ส่งชื่อของบุคคลเป็นพารามิเตอร์สตริงการสืบค้นไปยังปลายทาง 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

โดยสรุป JavaScript Async/Await ไม่ใช่แค่ Syntactical Sugar แต่เป็นสัญญา