モダンなJSの話──async function

こんにちは。イノベーター・ジャパン（以下、IJ）のエンジニアのbmfです。

今回はasync functionについて書きます。

Promiseの理解は前提となるので、まだPromiseを知らない人はモダンなJSの話──Promise をご参考ください。

async functionとは

async functionはAsync Functionオブジェクトを返す関数です。

asyncとawaitというキーワードを使って、Promiseよりも簡潔に非同期処理を書くことができます。

ES2017で仕様が定義されています。

使い方

使い方はカンタンです。

async関数を関数定義の時に頭につけるだけです。

Promise以外の値を返すように定義した場合は、その値で解決された形でPromiseが返されます。

async function asyncFunc() {
    return 'すごい！';
}

asyncFunc().then((result) => {
    console.log(result);
});

async function asyncFuncB(text) {
    return 'すごい！' + text;
}

asyncFuncB('さすが！').then((result) => {
    console.log(result);
});

もちろん、Promiseを返すこともできます。

async function asyncFuncC() {
  return new Promise((resolve, reject) => {
    resolve('すばらしい！');
  });
}

asyncFuncC().then((result) => {
  console.log(result);
});

ちなみに、上は下のように書き換え可能です。

async function asyncFuncC() {
    return Promise.resolve('すばらしい！')
}

asyncFuncC().then((result) => {
    console.log(result);
});

また、async関数内では、awaitキーワードを使うことができます。

awaitキーワードはPromiseの結果が返されるまで処理を止めることができる演算子です。

awaitキーワードを使うことでPromise.then()~の部分を省略して記述することができます。 　

async function awaitFunc() {
    return 'ワンダフル！';
}

async function asyncFuncD() {
    let result = await awaitFunc();
  console.log(result);
}

asyncFuncD();

所感

Promiseを一々書かなくともasyncキーワードを使うと簡潔にPromiseを返す関数が作れる上に、非同期処理がより実装しやすくなりましたね。

参考

• MDN - async function