JavaScriptの async/await の使い方

こんにちは。ShareWisのソフトウェアエンジニアのフンです。
この記事ではJavascriptにおける async/awaitについて紹介したいと思います。

async/awaitパターンとは多くのプログラミング言語で用いられる構文上の特徴であり、非同期、ノンブロッキング関数を通常の同期関数と同様の方法で構造化することができるようにするものです。

Javascriptにおける async/await とは？

async とは？

asyncとは任意の関数の前に追加することができるJavascript の予約語の一つです。asyncを関数の前に置くとその関数がPromiseオブジェクトを返すようになります。

async関数を使用するには、以下のように従来のプロミス/コールバックの記法で記述します。

async function getCompanyName () {
    return "Share-Wis Company"
}

明示的にPromiseオブジェクトをを指定することも可能です。下記は上記のコードと同じ値を返します。

async function getCompanyName() {
    return Promise.resolve("Share-Wis Company")
}

getCompanyName()を使用するには関数が返すPromiseオブジェクトを使用します。getCompanyName()の処理が成功すると、then()関数が発火しコールバックが呼び出されます。

awaitとは？

awaitの書き方

let value = await promise;

awaitはasyncが使用されていない関数内で使用できない

もし非同期ではない関数内でawaitを使おうとすると、シンタックスエラーが発生します。

function f() {
    let promise = Promise.resolve(1);
    let result = await promise; // Syntax error
}

async function getCompanyName () {
    return "Share-Wis Company"
}
async function callingFunction() {
    const companyName = await getCompanyName() 
    console.log('Company name:',companyName) 
}
callingFunction()

async/awaitはPromise.allとの相性が抜群

let results = await Promise.all([
   fetch(url1),
   fetch(url2),
    ...
]);

async/awaitブロック内でのエラーの取り扱い

async function handlingError() {
    await Promise.reject(new Error('error'))
}

または、

async function handlingError() {
    throw new Error("error");
}

async function handlingError() {
    try {
        const response = await fetch('api-url')
    } catch(err) {
        console.log(err)
    }
}

async function handlingError() {
    const response = await fetch('api-url')
}
// handlingError() 例外処理発生時にPromiseが拒否される
handlingError().catch(alert)

最後に

awaitを関数の前に置くことで出来るようになること

await only works inside an async function

The error will show

Let improve the above example by using await

async function getCompanyName () {
    return "Share-Wis Company"
}
async function callingFunction() {
    const companyName = await getCompanyName() 
    console.log('Company name:',companyName) 
}
callingFunction()

How can we handle errors in async/await block?

If a promise resolves normally, then await promise returns the result. But in the case of a rejection, it throws the error, just as if there were a throw statement at that line.

async function handlingError() {
    await Promise.reject(new Error('error'))
}

or use this:

async function handlingError() {
    throw new Error("error");
}

async function handlingError() {
    try {
        const response = await fetch('api-url')
    } catch(err) {
        console.log(err)
    }
}

async function handlingError() {
    const response = await fetch('api-url')
}
// handlingError() becomes a rejected promise
handlingError().catch(alert)