ほぼ独学の開発者として、私は無料または有料のインターネット チュートリアルの広い世界を経験しました。 HTTP リクエストを実行するチュートリアルで何度も目にしたのは、Axios と呼ばれる JavaScript ライブラリの使用です。 この一見目立たないライブラリを、なぜさまざまなウェブ開発教育者が使っているのか、その理由を知りたかったのです。 そこで、Axios が提供するものと、（おそらく）使用する価値がある理由について、非常にシンプルでわかりやすい説明を提供するために、掘り下げてみることにしました。
何をするか
簡単に言うと、Axios は node.js からの HTTP 要求またはブラウザからの XMLHttpRequests に用いられる Javascript のライブラリであり、また ES6 Promise API をサポートするものです。 素晴らしい、そこから、私たちがすでに行うことができ、最近大幅に改善されたことを行うことができます…なぜ悩むのでしょうか？
What it aims to improve: .fetch()
Fetch は JSON データを扱うときに 2 段階の処理を使用します。最初のリクエストを作成後、実際のデータ オブジェクトを受け取るために、レスポンスで .json() メソッドを呼び出す必要があります。 カープール調達アプリに関連するドライバーのオブジェクトを取得するフェッチ リクエストがある場合、次のようになります:
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res)
これは保留中のプロミスとリクエストに成功したことを知らせるレスポンス オブジェクトを返します。 .json() メソッドにレスポンスを渡すことも覚えておかなければなりません。
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res.json())
さて、これは大きな問題ではなく、多くのことと同様に、本当に構文の暗記に帰結します。 しかし、開発者として、私たちは地球上で最も怠惰で最も効率的な生き物であると同時に、あらゆる種類の省略法や時間節約を考慮する価値があると、Axios は考えています。 MDN では次のように説明しています:
A
fetch()プロミスは、ネットワーク エラーが発生したか、サーバー側で CORS が誤って設定された場合にTypeErrorで拒否されます。 次のコード ブロックの出力の予想はエラーになりますが、その代わりに ok になります。const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`)
.catch(error => console.log('ok'))
.then(res => console.log('error'));DNS ルックアップの失敗のような比較的まれなネットワーク エラー状況で
fetch()が約束を拒否するだけであることが判明しました。 幸運にもfetch()はシンプルなokフラグを提供し、レスポンスのステータスコードが成功の範囲にあるかどうかを示します。 一般的に何が起こるかというと、すべてのfetch()呼び出しで使用される、単一サイズのエラー処理関数を書くことになります。Axios のインストール
Grabbing new libraries is easy as pie days (Mmm. rhubarb), I prefer npm. プロジェクトフォルダのルートでターミナルを開き、
npm install axiosを実行すれば設定完了です。 先ほどと同じフェッチ要求を行うには、フェッチメソッドの代わりにaxios.get()を次のように実行します:const baseUrl = 'http://localhost:3000/api/v1'axios.get(`${baseUrl}/drivers`).then(res => res)Presto! axios を使用すると、HTTP リクエストの結果を .json() メソッドに渡す必要がなくなります。 Axios は単に期待するデータオブジェクトをそのまま返します。 さらに、HTTPリクエストで何らかのエラーが発生した場合、.catch()ブロックがすぐに正常に実行されます。 以下は、GitHub ページから直接引用したものを含む、すべての主要機能の簡単な概要です:
- Make XMLHttpRequests from the browser
- Make http requests from node.js
- Promise API をサポート
- Intercept request and response
Transform request and response data
- Cancel requests
- Automatic transforms for JSON data
- Client side support for protecting against XSRF
まとめると Axios は何より生活の質の向上に寄与していることがわかります。 しかし、ワークフローに多くの小さな、段階的な生活の質の調整を行うことで、開発の品質と速度を劇的に向上させることができます。