はじめに
Web 上の多くのプロジェクトは、開発の段階の一部で REST API とインターフェイスする必要があります。Axiosは、Angular.jsバージョン1系の$http
サービスに基づく軽量HTTPクライアントであり、ネイティブJavaScriptの Fetch API に似ています。
Axios は promiseベースであり、非同期コードをより読みやすくするために、JavaScript のasync
およびawait
を活用することができます。
リクエストを傍受してキャンセルすることもでき、クロスサイトリクエストフォージェリに対するクライアント側の保護機能が組み込まれています。
この記事では、Axiosを使用して、Reactアプリケーション内の一般的な JSONプレースホルダーAPI にアクセスする方法の例を説明します。
前提条件
この記事を進めるには、次のものが必要です。
ステップ1 — プロジェクトにAxiosを追加する
このセクションでは、Create React Appを使用してReactプロジェクトをセットアップする方法のチュートリアルに従って作成したdigital-ocean-tutorial
React プロジェクトにAxiosを追加します。
プロジェクトにAxios を追加するには、ターミナルを開き、ディレクトリをこのプロジェクトに変更します。
- cd digital-ocean-tutorial
その後、このコマンドを実行してAxiosをインストールします。
次に、Axios を使用するファイルにインポートする必要があります。
ステップ2 — GET
リクエストを実行する
この例では、新しいコンポーネントを作成し、そのコンポーネントにAxios をインポートしてGET
リクエストを送信します。
React プロジェクトの src
フォルダ内に、PersonList.js
という名前のコンポーネントを作成します。
次のコードをコンポーネントに追加します。
digital-ocean-tutorial/src/PersonList.js
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
persons: []
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
const persons = res.data;
this.setState({ persons });
})
}
render() {
return (
<ul>
{ this.state.persons.map(person => <li>{person.name}</li>)}
</ul>
)
}
}
まず、React と Axios をインポートして、両方をコンポーネントで使用できるようにします。次に、componentDidMount
のライフサイクルフックを使用して、GET
リクエストを実行します。
axios.get(url)
をAPI エンドポイントのURL と組み合わせて使用すると、応答オブジェクトを返すpromiseを取得します。応答オブジェクト内には、person
の値が割り当てられるデータがあります。
res.status
を基にステータスコードや、res.request
内の詳細情報など、リクエストに関するその他の情報を取得することもできます。
ステップ3 — POST
リクエストを実行する
このステップでは、POST
と呼ばれる別のHTTPリクエストメソッドを使用してAxiosを使用します。
PersonList
内の前のコードを削除し、次のコードを追加してユーザー入力可能なフォームを作成し、その後コンテンツをAPIに POST
します。
digital-ocean-tutorial/src/PersonList.js
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
name: '',
}
handleChange = event => {
this.setState({ name: event.target.value });
}
handleSubmit = event => {
event.preventDefault();
const user = {
name: this.state.name
};
axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
.then(res => {
console.log(res);
console.log(res.data);
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Person Name:
<input type="text" name="name" onChange={this.handleChange} />
</label>
<button type="submit">Add</button>
</form>
</div>
)
}
}
handleSubmit
関数内で、フォームのデフォルトの動作を無効にします。その後、state
をuser
入力に更新します。
POST
を使用すると、then
コール内で使用できる情報を含む同じ応答オブジェクトを取得できます。
POST
リクエストを完了するには、まず、user
入力をキャプチャします。次に、POST
リクエストと共に入力を追加すると、応答が得られます。次に、console.log
応答を使用して、フォームに user
入力を表示できます。
ステップ4 — DELETE
リクエストを実行する
この例では、axios.delete
を使用して API から項目を削除し、URLをパラメータとして渡す方法を説明します。
フォームのコードをPOST
の例から変更して、新しいユーザーを追加する代わりにユーザーを削除します。
digital-ocean-tutorial/src/PersonList.js
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
id: '',
}
handleChange = event => {
this.setState({ id: event.target.value });
}
handleSubmit = event => {
event.preventDefault();
axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
.then(res => {
console.log(res);
console.log(res.data);
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Person ID:
<input type="text" name="id" onChange={this.handleChange} />
</label>
<button type="submit">Delete</button>
</form>
</div>
)
}
}
この場合も、res
オブジェクトは、リクエストに関する情報を提供します。その後、フォームの送信後に、console.log
にその情報を再度表示できます。
ステップ5 — Axios で Baseインスタンスを使用する
この例では、URLとその他の設定要素を定義できるbaseインスタンスを設定する方法を説明します。
api.js
という名前の別のファイルを作成します。
次のデフォルトを使用して、新しいaxios
インスタンスをエクスポートします。
digital-ocean-tutorial/src/api.js
import axios from 'axios';
export default axios.create({
baseURL: `http://jsonplaceholder.typicode.com/`
});
デフォルトインスタンスを設定すると、PersonList
コンポーネント内で使用できるようになります。次のように新しいインスタンスをインポートします。
digital-ocean-tutorial/src/PersonList.js
import React from 'react';
import axios from 'axios';
import API from '../api';
export default class PersonList extends React.Component {
handleSubmit = event => {
event.preventDefault();
API.delete(`users/${this.state.id}`)
.then(res => {
console.log(res);
console.log(res.data);
})
}
}
http://jsonplaceholder.typicode.com/
が、ベース URL になっているため、APIで別のエンドポイントにアクセスするたびにURL全体を入力する必要がなくなりました。
ステップ6 — async
および await
を使用する
この例では、promiseを処理するために、async
およびawait
の操作方法を説明します。
await
キーワードは、promise
を解決し値
を返します。その後、値
を変数に割り当てることができます。
handleSubmit = async event => {
event.preventDefault();
//
const response = await API.delete(`users/${this.state.id}`);
console.log(response);
console.log(response.data);
};
このコードサンプルでは、.then()
が置き換えられています。promise
は解決され、値はresponse
変数内に格納されます。
まとめ
このチュートリアルでは、Reactアプリケーション内でAxiosを使用してHTTPリクエストを作成し、応答を処理する方法の例をいくつか見てきました。
Reactについての詳細については、React.js でのコーディング方法シリーズを参照するか、またはReact トピックページでより多くの演習とプログラミングプロジェクトをご覧ください。