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

はじめに

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

Promiseで書く非同期通信

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で書く非同期通信

一方、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

互いの特徴

Promise

• 使えるブラウザが多い

• 書ける/読める人が多い

• エラーハンドリングしやすい

• Promise.all()で複数の通信を同時にできる

• ネストが深くなりがち

• 見慣れない.thenが入る

• 文なので冗長的

async/await

• クール

• ネストが浅い

• 式なのでシンプル

• 通常の同期通信のように書ける

• 使えるブラウザが少ない

• 書ける/読める人が少ない

• エラーハンドリングの書き方難しい

• 複数の通信を同時にできない

• 特にasyncを書き忘れる

結論

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

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

以上!