web-dev-qa-db-ja.com

ES6フェッチの代わりにaxiosを使用する理由はありますか

AxiosとES6 fetchのドキュメントを調べたところ、どちらも非常によく似ていて、$。ajaxとその短縮形の強い影響を経験しました。

Axiosの主な利点は、ブラウザーのサポートです。

Babel-polyfillを使用する場合、axiosを使用する理由はありません。

javascriptecmascript-6axios
23
Sasha Kos

Axios over Fetchを使用するいくつかの理由：

  1. 要求の進行状況を監視する機能

これは、XMLHttpRequest（axiosを強化）とFetch APIの間の問題です。

Fetch APIは現在、リクエストの進行状況を通知する方法を提供していません。これは、大規模ファイルのアップロードなどのフィードバックメカニズムを強化する機能です。

一方、Axiosにはこの機能が組み込まれています。

_axios.post('/api', data, {
    onUploadProgress: ({ total, loaded }) => {
        // update progress
    }),
})
_
  1. エラー処理

バックエンドが_500 Internal Server Error_応答コードを返すとき、fetchはそれを_200 OK_とは異なるものとして扱いません。

これは、応答がどのように見えるかの以前の仮定がすべて無効になるため、ほとんどの場合不便です。

ほとんどの場合、サーバーから誤った応答を受信した場合、できるだけ早く処理パイプラインを中止し、エラー処理ケースに切り替えます。

_fetch(url)
    .then(reponse => {
        if (!(status >= 200 && status < 300)) {
            return Promise.reject(new Error("Invalid response status"));
        }

        return response;
    })
    .then(response => response.json())
    .then(/* normal processing */)
    .catch(/* error handling */);
_

これを達成するのは難しくありませんが、繰り返しを避けるためにこのロジックを何らかの抽象化の下でキャプチャしたいと思うでしょう。これにより、AxiosというWeb API抽象化に一歩近づきます。

Axiosは正常な処理を行い、応答が誤ったステータスを返す場合、約束を拒否します。この動作は、axiosのほとんどのものと同様にカスタマイズ可能です。

  1. テスト中

Axiosには moxios があり、fetchには fetch-mock があります。

これらのライブラリはどちらも優れていますが、私の経験では、_fetch-mock_は、Jestがポリフィルされたものよりもモックされたフェッチを使用するために追加のセットアップが必要でした。

moxios.wait()は、リクエストと一致した後に解決されるpromiseを返すことも気に入っています。

  1. Axiosが提供するその他の機能

たとえば、すべてのリクエストパラメータにAPIキーを追加するインターセプターを設定したり、アクティブなリクエストを監視して読み込み画面を表示したりできます。

あるオプションを他のオプションよりも使用する理由は、実際の要件から利便性までさまざまです。

進行状況を監視する必要がある場合は、Axios（またはXMLHttpRequest）を使用します。

Service Workerを作成している場合は、Fetchを使用します。

それ以外の場合は、より便利なものを使用してください。

29
mpontus

この：

_fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
      title,
      body
    })
  }).then((res) => {
    if (res.ok) {
      return res.json()
    }

    throw new Error(res.responseText);

  })
  .then((data) => console.log(data))
  .catch((err) => console.log(err))
_

これにより、本質的にaxiosで表現できます。

_axios.post('https://jsonplaceholder.typicode.com/posts', {
    title,
    body
  }).then((data) => console.log(data))
  .catch((err) => console.log(err))
_

本質的に：

  1. res.json()、res.text()などを実行する必要はありません
  2. 実際のpromise catchハンドラーで200以外のステータスエラーをキャッチするために_res.ok_を処理する必要はありません。
  3. ペイロードを文字列化する必要はありません。デフォルトではaxiosによって処理されます。

全体的にaxiosは、リクエストを処理するためのデザインの観点から、より高レベルで扱いやすいAPIです。

12
Karen Grigoryan