JavaScript

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

こんにちは!今日は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の方がいいかも。例外処理できるし。

以上!