axios
- ブラウザや、Node.jsで動くAjaxリクエストを送るためのPromiseベースのHTTPクライアントです。
- 404などエラーを受け取るとcatchできる。
- GitHubスター数が多い。
メリット
- レスポンスがjsonベースで返ってくるのでレスポンスを使ってエラーハンドリングするのが簡単。（例えば、エラーコードxxxの場合はこうするなどの処理の実装が楽）
用途
Vue.jsやReactで、Ajaxをする場合にはよく使われています。
インストール
|
1 |
yarn add axios |
組み込み
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import axios from 'axios' axios.get('/user?ID=12345') .then((response) => { // 成功した場合 console.log(response); }) .catch((error) => { // 失敗した場合 console.log(error); console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); }) .finally(() => { // 事後処理 }); |
axiosはエラーエラーレスポンスの内容を「error.response」で見れるのですがかなり詳細に確認ができるので便利です。
fetch(node-fetch)
ブラウザ標準のAPIです。（node.js開発ではnode-fetchというものが使えます。）
メリット
- インストールが不要（ただ、node.js環境であればnode-fetchのインストールが必要になります。）
- サイズが小さい
- こちらもPromiseベースのモダンJSに対応しています。
- npmのダウンロード数で言えばaxiosよりも多い。
デメリット
- レスポンスがjson形式ではないのでもしレスポンスデータを整形したい場合などはjsonメソッドなどを使ったりして別途整形が必要になる。
組み込み
|
1 2 3 4 5 6 7 8 9 |
fetch('https://xxx/user?ID=12345') .then(response => { if (!response.ok) { throw new Error(`${response.status} ${response.statusText}`); } return response.json(); }) .then(data => console.log(data)) .catch(error => console.error(error)); |
この記事へのコメントはありません。