【JavaScript】async/await

async/awaitとは

Promiseより快適に非同期処理を利用することが出来る構文。

async

  • 非同期関数を定義する
    関数名の前にasyncを書くと、その関数はPromiseオブジェクトを返す。
async function test() {
    return 'test';
}

test().then(value => {
    console.log(value); // => test
});

await

  • JavaScriptを待機させる
    async関数の中に記載すると、awaitを指定した関数のPromiseオブジェクトが結果を返すまでJavaScriptを待機させる。
function test(value) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(value * 2);
        }, 1000);
    })
}

async function sample() {
    const result = await test(5);
    return result + 5;
}

sample().then(result => {
    console.log(result); // => 15
});

注意
async関数でない場合にawaitは使えないため、必ずセットで利用する

Promiseとの比較

先ほどのawaitの例で書いた処理をPromiseで書いた場合、async/awaitの方がより簡潔に非同期処理を書くことが出来る。

function test(value) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(value * 2);
        }, 1000);
    })
}

function sample() {
    return test(5).then(result => {
        return result + 5;
    });
}

sample().then(result => {
    console.log(result); // => 15
});

参考