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

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

何が違ったかというと、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 すると Promise を resolve し、 throw すると Promise を reject することになるんだそうな。

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 とはなんだったんだ.........。とても恥ずかしい.....。

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

Takaya Kobayashi Feb 8 Updated on Feb 11, 2018

Takaya Kobayashi

Taking Notes

Vue.js Events

flavio ⚡️🔥 - Jun 19

Building A Portfolio: The Painful Way

Daniel McMahon - Jun 18

Developing NPM modules for Web and React Native simultaneously with Webpack

Kyle Johnson - Jun 18

Creating a Search app with Vue + Parcel + Typescript: Part 1

Scott Lepper - Jun 19