[Day17] JavaScript - Async & Await

• 为解决JavaScript非同步问题，最初使用的方式是callback function，但为了避免造成callback hell，而有了ES6的Promise物件。
• 而後ES7又出现了async function，主要目的在於简化同步操作 promise 的表现，及对多个 Promise 物件执行某些操作。

语法

async function myFunc () {
  let resolveValue = await <Promise>
}

我们只需在function前面加上async即可使用async function，并可搭配await关键字，await会加在Promise之前，代表需等待Promise执行完任务之後才会进行下一步。

• 以下方范例为例，执行的步骤为:

1. 先执行getUsername()函数
2. 在getUsername()函数里，再调用sendRequest()函数
3. 等待sendRequest()函数执行完成任务，并将resolve里的返回值存取至username变数
4. 最後即consol.log出Michael Jordan

function sendRequest(){   
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve('Michael Jordan');
        },2000);
    });
}

async function getUsername(){
    let username = await sendRequest();   //步骤2.3
    console.log(username);    //步骤4
}

getUsername();    //步骤1

总结

• async / await 让非同步执行程序码更贴近同步执行程序码
• async function会返回Promise物件
• await关键字只能在async function内使用
• await关键字後面必须接Promise物件，并会等待Promise执行完任务，才继续下一行程序码

参考来源:
https://pjchender.dev/javascript/js-async-await/