JavaScriptのPromiseについて part3

初めに

今回はasyncとawaitキーワードについてまとめていきたいと思います。

参考文章はこちらです。
Async/await - javascript.info

async/await

async：関数が解決（resolve）されたPromiseを返すことが約束される。
await：async関数の中で、指定のPromiseが完了（settled）状態になるまで待つ。async functionの中のみ動作する。

await

awaitの動きを見ていきたいと思います。

async function fn() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('done!'), 1000)
  })

  let result = await promise

  console.log('before result')
  console.log(result)
  console.log('after result')
}

fn()
console.log('after fn')


// after fn

// before result
// done!
// after result

async関数fnを呼び出したあとconsole.log('after fn')が実行し、fnに戻ってawaitが変数promiseのsetTimeout()がresolve()を返すまで待ち、最後に残りの部分が同期に実行していきます。

awaitとsetTimeout()、resolve()併用すれば結果の出す時間が計測器でちゃんと作動し、awaitで必ず結果を得てから後の処理を継続していく。asyncもawaitもとても便利でわかりやすく使うキーワードだと思います。

しかしテストの中ちょっと気になるところまた出てきましたので、
例えば、awaitをつけたPromiseはPromiseオブジェクトとして使えるでしょうか。

async function test() {
  let promise = await new Promise((resolve, reject) => {
    setTimeout(() => resolve('123'), 3000)
  })

  promise.then((result) => {
    console.log(result)
  })
}

test()

// UnhandledPromiseRejectionWarning: TypeError: promise.then is not a function

実行すると未処理エラーが出てました。あれと思って、

async function test() {
  let promise = await new Promise((resolve, reject) => {
    setTimeout(() => resolve('123'), 3000)
  })

  // promise.then((result) => {
  //   console.log(result)
  // })
  console.log(typeof promise) // string
  console.log(promise instanceof Promise) // false
  console.log(promise.toString()) // 123
}

test()

awaitを外すとこうなるんですが、

  console.log(typeof promise) // object
  console.log(promise instanceof Promise) // true
  console.log(promise.toString()) // [object Promise]

そしてPromise.resolve()を使って、thenが正常に動作してくれました。

  Promise.resolve(promise)
    .then((result) => {
      console.log(result) // 123
    })

もちろんasyncなら、関数testが返された結果をPromiseでラップし、thenでその結果を受け取り、進んでいきます。

async function test() {
  let promise = await new Promise((resolve, reject) => {
    setTimeout(() => resolve('123'), 3000)
  })
  return promise
}

test()
  .then(result => console.log(result)) // 123

下はasyncをつけた関数の検定です。

console.log(test().toString()) // [object Promise]
console.log(test() instanceof Promise) //true