出典:YouTube DREAMコードJavaScript

async & await

clear style of using promise
既存の承諾に加えて、より簡単なAPIを提供します.
= syntactic sugar (ex. class)
約束をより簡潔にし、同期して実行しているように見えます.

1. async

asyncを関数の前に貼り付けることで、関数は自動的にpromiseに変換されます.
簡単にpromise=>文法糖を使う

async function fetchUser(){
    //do network request in 10 secs..
    return 'ellie';
    };


const user = fetchUser(); //Promise {<fulfilled>: 'ellie'} 출력 
user.then(console.log)
console.log(user);

2. await ✨

async付き関数にのみ書き込むことができます.
≪待機|Wait|emdw≫:遅延終了を待機します.

function delay(ms){
    return new Promise(resolve => setTimeout(resolve, ms));
}

上記の関数は、msが指定された後に指定された解析を呼び出すという承諾を返します.

async function getApple(){
    await delay(1000);
    //throw 'error'; //error handling
    return '🍎';
}
async function getBanana(){
    await delay(2000);
    return '🍌';
}

上記の関数は非同期のように見えますが、同期されているようです.

{
    function getBanana(){
    return delay(3000)
    .then(()=> '🍌');
}
}

Get Banna()promise形態

{
    function pickFruits(){
    return getApple().then(apple => {
        return getBanana().then(banana => `${apple} + ${banana}`)
    });
}
}

asyncとawaitを使用して上記の関数を簡略化

{
    async function pickFruits(){
    try{
 
    const apple = await applePromise();
    const banana = await bananaPromise();
    
} catch{
    return '🍍' // handling error 
}
return `${apple} + ${banana}`;}

pickFruits().then(console.log);
}

3.並列処理待ち

get AppleとgetBannaを同時に処理することで時間を短縮
promiseを作成し、promiseコードブロックをすぐに実行します.

async function pickFruits(){
    const applePromise = getApple();
    const bananaPromise = getBanana();
    
    const apple = await applePromise;
    const banana = await bananaPromise;
    

return `${apple} + ${banana}`;} 

pickFruits().then(console.log);

4. useful Promise APIs

Promise.all:promiseで配列を渡すと、すべてのpromiseが収集され、受信するまで

function pickAllFruits(){
    return Promise.all([getApple(),getBanana()])
    .then(fruits => fruits.join(' + '));
}
pickAllFruits().then(console.log);


function pickOnlyone(){
    return Promise.race([getApple(), getBanana()]);
}

pickOnlyone().then(console.log); //🍎 출력된다.