axiosとは？
ブラウザやNode.jsで動くPromiseベースのHTTPクライアントです｡ HTTPリクエストを簡単に行うことができます。
※ HTTPクライアントは、HTTPリクエストを送信して、HTTPレスポンスを受信するクライアント側のコードのことです。JavaScriptを使用してHTTPクライアントを実装するには、XMLHttpRequestを使用します
サーバー側ではNode.jsのHTTPモジュールを使用し、クライアント側ではXMLHttpRequestを使用することで、ウェブアプリを開発できます。XMLHttpRequestを使用することで、非同期通信が可能になり、ユーザーがページを更新することなくデータを取得することができます。Node.jsのhttpモジュールを使用することで、サーバー側でのリクエスト処理が可能になる仕組みです。
Node.jsには、HTTP通信を扱うためのHTTPモジュールが用意されています。このモジュールを使用することで、HTTPサーバーの作成や、HTTPクライアントの作成などが可能になります。
axiosのユースケース
外部APIからデータを取得する場合などに使用されます。例えば、REST-APIの実行など､これを使うと簡単に実装できます｡
axiosの特徴
Axiosは、多数のオプションを提供し、ヘッダーのカスタマイズ、クッキーの処理、リダイレクトのハンドリングなどが可能です。AxiosはPromiseを返すため、非同期処理を簡単に行えます。大量のリクエストを行う場合は、Axiosのパフォーマンスに注意です。
処理の流れ
まず、ライブラリをインポートします。
$ npm i axios
1: axiosのインスタンスを作成する
const axiosInstance = axios.create({
baseURL: 'https://example.com/api/',
timeout: 1000,
headers: {
'X-Custom-Header': 'foobar',
},
});
axiosのcreate()メソッドを使用して、axiosのインスタンスを作成します。baseURLプロパティには、リクエスト先のベースとなるURLを指定できます。timeoutプロパティは、リクエストがタイムアウトするまでの時間を指定。headersプロパティは、リクエストに含めるヘッダーを指定できます。
2: HTTPリクエストを送信する
axiosInstance.get('/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
get()メソッドを使用して、GETリクエストを送信しています。レスポンスが正常に受信できた場合、then()メソッドのコールバック関数が実行され、レスポンスのデータが引数として渡されます。エラー時は、catch()メソッドのコールバック関数が実行され、エラーオブジェクトが引数として渡されます。
3: HTTPリクエストのキャンセル
const source = axios.CancelToken.source();
axiosInstance.get('/users', {
cancelToken: source.token,
})
.then(response => {
console.log(response.data);
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('Request canceled', error.message);
} else {
console.error(error);
}
});
// キャンセルする
source.cancel('Operation canceled by the user.');
キャンセルトークンを作成して、HTTPリクエストのcancelTokenオプションに指定しています。キャンセルが必要な場合は、キャンセルトークンのcancel()メソッドを呼び出すことで、HTTPリクエストをキャンセルできます。キャンセルが発生した場合は、catch()メソッドのコールバック関数内で、axios.isCancel()メソッドを使用して、キャンセルかどうかを判定できます。
キャンセルトークンは、非同期処理をキャンセルするためのトークン。キャンセルトークンを使用すると非同期リクエストをキャンセルできます。「ページ遷移のキャンセル」「非同期処理のタイムアウト」などに活用します。