【JS】Promiseで書かれたAjaxをasync/awaitに書き直す

こんにちは!今日はJavaScriptの非同期通信をシンプルに書くアイデアについてです。

はじめに

この記事の非同期通信ではJavaScriptのライブラリであるaxiosを用います。非同期通信によく使われるやつですね:)

axiosで数字の1を取ってきて1を足す例を考えてみます。…勿論実際はこんなURLもapiもないよ!

promiseだとこんな感じ!

const foo = () => {
  axios.get('https://////////////').then(res => {
    const answer = res + 1
    console.log(res + 1)
  })
}

foo() // 2

全然読めますね!しかし、括弧の中で処理し続ける気持ち悪さや.thenの意味不明さなど、若干の取っ付きにくさは否めません。

一方、async/awaitで書くとこう!

const foo = async () => {
  const res = await axios.get('https://////////////')
  const answer = res + 1
  console.log(res + 1)
}

foo() // 2

ネストも浅く、.thenもないですね!手続き型のような記述ができます。

awaitは式としても使えるのよ。こんな風邪に関数型チックにも書けます。

const foo = async () =>
  console.log((await axios.get('https://////////////')) + 1)

foo() // 2

シンプルなapiならどんどん使おう!

かっちりしたプログラムならPromiseの方がいいかも。例外処理できるし。

以上!