Promise

これ を知らないことには async, await は理解できません。 かんたんに言うと Promise は 非同期処理の結果が格納されたオブジェクトです。

普段は fetch 等の リクエストを実行するような関数が Promise を返却するので生で触ることはあまり多くありませんが、 この記事では多用していきます 💪

Promise オブジェクトの作成は 第一引数で受け取った関数を実行するような関数を Promise に渡してあげるだけです。 うーん、余計難しくなってしまいました。

たとえば 10秒待つ Promise は以下のように作ります。

promise = new Promise(resolve => setTimeout(resolve, 10000)) // 単位はミリ秒

上記だけでは 何も起こりません。

ここで重要になるのが then() メソッドです。 promise から コールされた処理結果を抽出します。

例えばこのように書くと 10秒後に test が出力されます。

promise.then(() => console.log('test'))

インスタンスが生成された瞬間から Promise に渡された 関数はコールされているため、 上記を実行するタイミングによって test が出力されるタイミングは異なります

promise = new Promise(resolve => setTimeout(resolve, 10000))
// すぐに実行したら 10秒待って出力されるし
// 10秒後に実行したらすぐ出力される
promise.then(() => console.log('test'))

これが Promise の基本です。

fetch api を使ってる人は fetch(url).then ってよく書いてたと思いますが、 あれは Promise オブジェクトのメソッドだったのですね。

promise = new Promise(resolve => setTimeout(resolve, 10000))
promise.then(() => {
  console.log('test1')
  return new Promise(resolve => setTimeout(resolve, 5000))
}).then(v => console.log('test2'))

async と await

分けて説明したいところですが、別々に利用することはできないため同時に説明します。

async は 関数の前につけて定義し(以後非同期関数という)、 await は 非同期関数のローカルスコープで利用することで処理をブロックします。

await が何を元にブロックするかというと、これが 前述した Promise オブジェクトなわけですね。やっと繋がりました。

await が Promise オブジェクトを受け取ると オブジェクトの状態が resolved になるまでブロックし、以降のプログラムは待ち状態になります。

これを利用して sleep 関数を書いてみましょう。

sleep = time => new Promise(resolve => setTimeout(resolve, time));

(async () => { // 非同期関数を即時実行しているだけ
  await sleep(3000)
  console.log(1)
  await sleep(5000)
  console.log(2)
  // 返却値が await に渡されてるだけなので以下のように書いても同じ
  // await new Promise(resolve => setTimeout(resolve, 5000))
})()

上記を実行すると 3秒待って 1, 5秒待って 2 が表示されましたね。

ちなみに fetch api の fetch(url).then(res => res.json()).then(data => {console.log(data)}) は await を使うと 以下のように書けます。

res = await fetch(url)
data = await res.json()

then() がなくなり、コールバック関数の中でしか得られなかった data が 同じスコープで 得られるのです。

ちょっと待ってください。 async は await を包むためのただの ラッパーなのでしょうか？

実は async は その名の通り 非同期関数なので、 関数の中は (await がある限り) 同期的に処理をしますが、 関数の外では (awaitに差し掛かると) 非同期に働きます。

f = async (i) => {await null; console.log(i)}
f(1)
console.log(2)
f(3)
console.log(4)

これを実行すると 2, 4, 1, 3 の順番で表示されるはずです。 (await がないと 1, 2, 3, 4)

これを同期的に処理したい場合、さらに 非同期関数の結果で await すればいいです。これは 非同期関数が Promise を返却するからです。

(async () => {
  f = async (i) => {await null; console.log(i)}
  await f(1)
  console.log(2)
  await f(3)
  console.log(4)
})()

そのために さらなる 非同期関数で囲む必要があるのは少し面倒ですけどね。

map の callback として使いたい

Webアプリケーションでは「負荷を軽減するために リクエストは 間隔を空けて送信する」みたいな仕様があるかもしれません。

それに見立てて、 ['a', 'b', 'c'] を 3秒間隔で イテレーションしながら 表示するプログラムを考えてみましょう。

まず、以下のように考えました。

sleep = time => new Promise(resolve => setTimeout(resolve, time))

list = ['a', 'b', 'c']

list.map(async v => {
  await sleep(3000)
  console.log(v)
})

じつはこれ、期待通りに動きません。 aaa

理想

• (3秒待つ)
  • a が表示
    • (3秒待つ)
      • b が表示
        • (3秒待つ)
          • c が表示

のように直列処理されてほしかったんですが

現実

• (3秒待つ)
  • a が表示
• (3秒待つ)
  • b が表示
• (3秒待つ)
  • c が表示

のように並列処理され、3秒後に同時に表示されてしまいます。

現実は厳しい。

まぁ非同期関数の性質を思えば仕方のないことです。

解決方法は以下です。

list = ['a', 'b', 'c'];

(async () => {
  for (let v of list) {
    await sleep(3000)
    console.log(v)
  }
})()

list = ['a', 'b', 'c'];

promise = sleep(3000)
list.map(v => {
  promise = promise.then(() => {
    console.log(v)
    return sleep(3000)
  })
  return promise
})