5.1 Fetch API
JavaScriptでHTTPリクエストを実行するためには、よく2つのライブラリが使われるよ: 組み込み関数fetch と外部ライブラリAxios。 どちらもAPIや他のウェブリソースとやり取りするための強力で柔軟な機能を提供してくれるよ。
Fetch APIは、ブラウザに組み込まれたHTTPリクエストを実行する方法なんだ。 プロミスに基づいていて、ネットワークリクエストを扱うための柔軟でモダンなアプローチを提供するんだよ。
シンプルなfetchリクエストの構文:
let promise = fetch(url, {method, headers,
body})
Fetchの主なコンセプト:
fetch(url, options): HTTPリクエストを実行するための主要なメソッドだよ- プロミスを返して、それはResponseオブジェクトに解決されるんだ
Fetchを使ったシンプルなGETリクエストの例:
JavaScript
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('ネットワークエラー：サーバーから正しくない応答が受信されました');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('リクエスト実行時にエラーが発生しました: ', error);
});
Fetchを使ったPOSTリクエストの例:
JavaScript
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('リクエスト実行時にエラーが発生しました: ', error);
});
Fetchの設定
Fetch APIはoptionsオブジェクトを通じて、メソッド、ヘッダー、リクエストボディなどの様々なパラメータを設定できるよ。
JavaScript
const options = {
method: 'GET', // または 'POST', 'PUT', 'DELETE' など
headers: {
'Content-Type': 'application/json'
},
// body: JSON.stringify(data) // POSTやPUTリクエストでリクエストボディを送信するために使用
};
fetch('https://jsonplaceholder.typicode.com/posts/1', options)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('リクエスト実行時にエラーが発生しました: ', error));
5.2 Axiosライブラリ
Axiosは、JavaScriptでHTTPリクエストを実行するための人気のライブラリだよ。ネイティブのFetch APIと比較して、より便利で機能的なAPIを提供していて、 自動的なJSON変換、タイムアウト処理、リクエストの中断、古いブラウザのサポートなど、たくさんの追加機能もあるんだ。
Axiosのインストール
Axiosはnpmを使ってインストールするか、CDN経由でブラウザに追加することができるよ。
npmを使ったインストール:
Terminal
npm install axios
Node.jsでの利用やモジュールバンドラ（例えばWebpack）での使用方法:
JavaScript
// CommonJS用
const axios = require('axios');
// ES6モジュール用
import axios from 'axios';
ブラウザでCDNを通じての接続:
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
シンプルなGETリクエストの構文:
let promise = axios.get(url)
シンプルなPOSTリクエストの構文:
let promise = axios.post(url, data, config)
Axiosの主な概念:
- axios(config): HTTPリクエストを実行するための主要なメソッドだよ
- configオブジェクトを受け取って、
url,method,headers,dataなどのパラメータを含むことができるよ。 - ショートカットメソッド: Axiosは各HTTPメソッドに対応するメソッドを提供してくれるよ（
axios.get,axios.post,axios.put,axios.deleteなど）、これで対応するリクエストの実行が簡単になるよ。 - プロミス: AxiosのすべてのメソッドはPromiseを返して、これは応答オブジェクトに解決されるか、エラーの場合に拒否されるんだ。
レスポンスとエラー処理付きのシンプルなGETリクエストの構文:
JavaScript
axios.get(url)
.then(response => {
// 成功した応答の処理
})
.catch(error => {
// エラーの処理
});
レスポンスとエラー処理付きのシンプルなPOSTリクエストの構文:
JavaScript
axios.post(url, data, config)
.then(response => {
// 成功した応答の処理
})
.catch(error => {
// エラーの処理
});
Axiosを使用したシンプルなGETリクエストの例:
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('リクエスト実行時にエラーが発生しました: ', error);
});
Axiosを使用したPOSTリクエストの例:
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('リクエスト実行時にエラーが発生しました: ', error);
});
5.3 Axiosの設定
Axiosの設定
Axiosはconfigオブジェクトを通じて、url, method, headers、データ(data)のようなパラメータでHTTPリクエストを構成できるよ。 以下は基本的なリクエスト設定の例だよ:
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
const config = {
method: 'get', // 'get', 'post', 'put', 'delete' など
url: 'https://jsonplaceholder.typicode.com/posts/1',
headers: {
'Content-Type': 'application/json' // データタイプを指定するためのヘッダー
},
// data: JSON.stringify(data) // POSTやPUTリクエストでリクエストボディを送信するために使用
};
axios(config)
.then(response => console.log(response.data))
.catch(error => console.error('リクエスト実行時にエラーが発生しました: ', error));
Axiosの追加機能:
- リクエストパラメータ: URLにリクエストパラメータを渡すことができるよ。
- リクエストの中断:
AbortControllerを使って行うよ。 - タイムアウト: リクエストの待機時間を設定できるよ。
リクエストパラメータの使用例:
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
axios.get('https://jsonplaceholder.typicode.com/posts', {
params: {
userId: 1 // リクエストパラメータはparamsオブジェクトを介して渡される
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('リクエスト実行時にエラーが発生しました: ', error);
});
5.4 FetchとAxiosの比較
では、主要なポイントでFetchとAxiosを比較してみよう:
1. 使いやすさ:
- Fetch: 基本的な操作には使いやすいけど、複雑なシナリオには追加の処理が必要（例えば、JSON変換やタイムアウト処理）。
- Axios: より便利で強力なAPIを提供して、複雑なリクエストを実行するのが簡単。
2. JSONのサポート:
- Fetch: 応答の本文をJSONに変換するために
response.json()の明示的な呼び出しが必要。 - Axios: JSON応答を自動的に変換する。
3. タイムアウト:
- Fetch: 組み込みのタイムアウトサポートはない。タイムアウトを実装するには
AbortControllerやラッパーを使用する必要がある。 - Axios: 設定を通じてタイムアウトをサポートしている。
4. インターセプタ:
- Fetch: リクエストや応答のインターセプタをサポートしていない。
- Axios: リクエストの送信前や応答の受信後にロジックを実行するためのインターセプタを使用できる。
Axiosのインターセプタの例
Interceptors（インターセプタ）は、リクエストの送信前や応答の受信後に特定のアクションを実行することを可能にするんだ:
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
// リクエスト用のインターセプタを追加
axios.interceptors.request.use(config => {
console.log('サーバーにリクエストが送信されました: ', new Date());
return config;
}, error => {
return Promise.reject(error);
});
// 応答用のインターセプタを追加
axios.interceptors.response.use(response => {
console.log('サーバーから応答を受信しました: ', new Date());
return response;
}, error => {
return Promise.reject(error);
});
// インターセプタ付きのリクエスト例
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response.data))
.catch(error => console.error('リクエスト実行時にエラーが発生しました: ', error));
Axiosを使った並行リクエスト
Axiosを使うとPromise.all()を通して並行リクエストを簡単に実行し、結果を処理できるよ:
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
Promise.all([
axios.get('https://jsonplaceholder.typicode.com/todos/1'),
axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
.then(responses => {
responses.forEach(response => {
console.log(response.data);
});
})
.catch(error => console.error('リクエスト実行時にエラーが発生しました: ', error));
GO TO FULL VERSION