TIL019 JavaScript: async & await


Async & Await


1. Async

function fetchUser() {
    return new Promise((resolve, reject) => {
        //do network request in 10 sec....
        resolve('somi');
    })
}

const user = fetchUser();
console.log(user);
promiseを用いると,上記の内容をasyncとして表すことができ,より簡潔に表すことができる.
async function fetchUser() {
    //do network request in 10 sec....
    return 'somi';
}

const user = fetchUser();
user.then(console.log);
console.log(user); //Promise {<fulfilled>: "somi"}

2. Await

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

async function getApple(){
    await delay(2000);
    // throw 'error'
    return 'apple';
}

async function getBanana() {
    await delay(1000);
    return 'banana';
}
下図のように合計2秒かかります.
function pickFruit() {
    return getApple().then(apple => {
        return getBanana().then(banana => `${apple}+${banana}`);
    });
}

async function pickFruit(){
    const apple = await getApple();
    const banana = await getBanana();
    return `${apple} + ${banana}`
}
promiseを作成して実行すると、並列に実行され、結果値が1秒以内に表示されます.
ただし、このように並列に実行すると、上記のようにコードは記述されません.(第3部参照)
async function pickFruit(){
    const promiseApple = getApple();
    const promiseBanana = getBanana();

    const apple = await promiseApple;
    const banana = await promiseBanana;
    return `${apple} + ${banana}`
}
pickFruit().then(console.log); //apple + banana

3. useful promise APIs

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

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

pickOnlyOne().then(console.log) //banana(먼저 실행되는 값만 출력됨)