モダンなJSの話──async function

es5 es6 javascript

プログラミング

2018-02-01 10:56:07

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。

async functionとは

async functionAsync Functionオブジェクトを返す関数です。

asyncawaitというキーワードを使って、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を返す関数が作れる上に、非同期処理がより実装しやすくなりましたね。

参考