JavaScriptに関するお知らせ

SINCE2019
ホーム
>
【JS】Promiseで書かれたAjaxをasync/awaitに書き直す

【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の方がいいかも。例外処理できるし。

以上!



【JS】NuxtのVuexモジュールモードの簡潔な書き方メモ-2.呼び出しと参照
PREV
2019-05-22
【JS】NuxtのVuexモジュールモードの簡潔な書き方メモ-2.呼び出しと参照

【JS】アロー関数の戻り値がObjectの時に()が必要な理由を詳しく解説
NEXT
2019-06-06
【JS】アロー関数の戻り値がObjectの時に()が必要な理由を詳しく解説