async/awaitの学習

以前Promiseを使ったループ処理について記述したが、これは再帰関数を利用していた。
普段扱いなれているfor文でループ処理はかけるのかなと感じていたが、
どうやらasync/awaitを使えばできることがわかったので、残しておく。

jQueryの$.ajaxからPromiseへの理解に時間を要したので、async/awaitも同様理解するのに
時間がかかるのかと予想していたのだが、この技術はPromiseをさらに便利にする仕組みだ。
だから、Promiseの使い方がわかっていれば簡単に理解できるし、便利になる。

目次

• asyncを関数名につけるとreturnされるものは、必ずPromiseになる
• async/awaitを使うと、非同期処理を同期的に記述できる
• Promise.allも同期的にかける
• 前回のPromiseでのループ処理をasync/awaitで記述してみる
• 非同期処理には全てasyncをつけるのか？

asyncを関数名の前につけるとreturnされるものは、必ずPromiseになる

  async function fn() {
    return 1;
  }

  console
  > fn()
  > Promise {1}

async/awaitを使うと、非同期処理を同期的に記述できる

  async function AsyncTest() {
    let result = await fn(); // awaitを使うには必ずasync関数内でないとだめ。
    console.log(result);
    return 1;
  }

  console
  > AsyncTest()
  > 1
  > Promise {1}

Promise.allも同期的にかける

  async function AsyncTest2() {
    let [r1, r2] = await Promise.all([fn(), fn()]);
    console.log(r1);
    console.log(r2);
    return r1 + r2
  }

  console
  > AsyncTest2() 
  > 1
  > 1
  > Promise {2}

前回のPromiseでのループ処理をasync/awaitで記述してみる

  async function fn(i) {
    console.log( (i+1) + '回目')
  }

async function loop (count) {
  for ( let i = 0; i < count; i += 1 ) {
    await fn(i);
  }
  return 'end'
}

  console
>loop(5).then(r=>{console.log(r)})
 1回目
 2回目
 3回目
 4回目
 5回目
 end
Promise {<resolved>: undefined}

最後に

Promiseについて理解できていたら、async/awaitはすごい便利な技である。 nodeで使う場合、v7以上であればasync/awaitがつかえる。