loading...

JavaScript の async/await の仕様をずっと誤解していた

jgs profile image Takaya Kobayashi Updated on ・1 min read

すごい初歩的なことかもしれないのだけれど、年単位ぐらいで誤解したままコードを書いていたので懺悔のためにも書いておく...。

何が違ったかというと、async function の扱いである。async function も function と同じだとおもっていて、 Promise を返さないと呼び出し側で await できないと勘違いしていた。そのため、今までは

const fn = () => new Promise(async (resolve, reject) => {...})

というような感じで Promise を一旦返すようにしていた。しかし、async function は呼び出すと Promise を返してくれるのだ。

参照: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function

const fn = async () => {}

console.log(fn)
console.log(fn())

Node.js v9.5 で確認した。

[AsyncFunction: fn]
Promise { undefined }

Promise が返ってくる...。よくよく調べていくと async function の中で return すると Promiseresolve し、 throw すると Promisereject することになるんだそうな。

const fn = async () => {
  return 'yo'
}

const main = async () => {
  const res = await fn()
  console.log(res)
}

main()

=>

yo
const fn = async () => {
  throw new Error('err')
  return 'yo'
}

const main = async () => {
  try {
    const res = await fn()
    console.log(res)
  } catch (err) {
    console.log(err)
  }
}

main()

=>

Error: err

まじか...。俺の Promise とはなんだったんだ.........。とても恥ずかしい.....。

Posted on by:

jgs profile

Takaya Kobayashi

@jgs

A Web Application/Service Creator

Discussion

markdown guide