多くのウェブアプリは、開発のどこかの時点でREST APIと連携する必要性に直面します。 Reactベースのウェブアプリでは、Axiosを使用できます。これは、 $httpサービスに基づいた軽量なHTTPクライアントです。その機能はJavaScriptのネイティブなFetch API.
に似ています。AxiosはPromiseベースであるため、JavaScriptの asyncと awaitを使用して、より読みやすい同期コードを作成することができます。また、インターセプトやリクエストのキャンセルもサポートしています。さらに、クロスサイトリクエストフォージェリに対するクライアント側の保護機能も組み込まれています。
このガイドでは、デモのReactアプリケーションで、人気のあるAxiosを使用してJSON PlaceholderAPIにアクセスする方法を紹介します。JavaScriptにおけるJSON形式については、このチュートリアルから詳しく学ぶことができます.
前提条件
このガイドで示されている手順を完了するには、以下のコンポーネントが必要です。
- 適切に設定されたUbuntuサーバー。以下は、CloudSigma上で独自のUbuntuサーバーをセットアップする.
- 手順です。最新バージョンのNode.jsがインストールされている必要があります。UbuntuにNode.jsをインストールする方法を参照してください。.
- A new React project using Create React Appを使用した新しいReactプロジェクト。まず、Create React Appを使用してReactプロジェクトをセットアップするガイドに従って実行すると便利です。.
- Basic understanding of HTML, CSS、およびJavaScriptの基本的な理解。.
ステップ 1：ReactプロジェクトにAxiosをインストールする
Axiosは、 npmモジュールとして直接利用可能です。npm上のAxiosを参照してください。必要なのは、Reactプロジェクトを作成し、Axiosパッケージをインストールすることだけです。
以下の npxコマンドは、 create-react-appを実行して新しいReactプロジェクトを作成します。プロジェクト名は、プロジェクト専用のディレクトリを作成するために使用されます。ここでは、プロジェクト名を react-axios-demoとしました。コマンドを実行します：
|
1 |
npx create-react-app react-axios-demo |
カレントディレクトリを新しく作成されたプロジェクトディレクトリに変更します：
|
1 |
cd react-axios-demo/ |
次に、 npm installコマンドを実行してAxiosをインストールします。バージョンが指定されていない場合、 npmが自動的に最新バージョンのAxiosをダウンロードしてインストールします：
|
1 |
npm install axios |
これでプロジェクトでAxiosを使用する準備が整いました！その機能を実際に使ってみましょう。
ステップ 2：GETリクエストを構築する
このステップでは、Axiosを使用して GETリクエストを送信する新しいコンポーネントの作成方法を紹介します。
まず、名前のリストを表示する新しいコンポーネント PersonListを作成します。コンポーネントを保存するための専用ディレクトリを作成します：
|
1 |
mkdir -pv src/components |
次に、ファイル PersonList.jsを作成します。 :
|
1 |
touch PersonList.js |
テキストエディタでファイルを開きます。ここでは、快適さと読みやすさのためにVisual Studio Codeを使用しています。以下のJavaScriptコードを入力してください：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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 key={person.id}>{person.name}</li> ) } </ul> ) } } |
ここで：
-
コンポーネント内で両方を使用できるように、ReactとAxiosをインポートしました。
-
We hook into the componentDidMountライフサイクルフックを利用して、GETリクエストを送信します。
APIエンドポイントから axios.get(<url>)を使用してPromiseを取得できます（レスポンスオブジェクトが返されます）。レスポンスオブジェクト内には、目的のデータが含まれています。その後、それを personの値に割り当てます。また、 res.statusの下にあるステータスコードや、 res.requestから、リクエストに関する追加情報を収集することもできます。.
次に、コンポーネントをメインの App.js ファイルに追加する必要があります。次のコードを追加します：
|
1 2 3 4 5 6 7 8 9 |
import PersonList from './components/PersonList.js'; function App() { return ( <div ClassName="App"> <PersonList/> </div> ) } |
このステップの設定は完了です。これでアプリを実行し、お好みのブラウザを使用してテストできます。開発サーバーを起動します：
|
1 |
npm start |
ご覧のように、出力には人名のリストがランダムな順序で表示されます：
ステップ 3: POSTリクエストの構築
このセクションでは、Axiosを使用して、 POST という別のHTTPリクエストメソッドを実行する方法を紹介します。これを実演するために、Reactプロジェクトに PersonAdd.
ファイル PersonAdd.js を作成します:
|
1 |
touch src/components/PersonAdd.js |
次に、テキストエディタでファイルを開き、以下のコードを入力します：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import axios from 'axios'; export default class PersonAdd 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> 氏名Name: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">追加</button> </form> </div> ) } } |
このコードでは、ユーザーの入力を受け取り、その内容をAPIにPOSTしています。 handleSubmit 関数の中で、フォームのデフォルトのアクションを防止し、状態をユーザーの入力に更新しています。 POST を使用すると、同じレスポンスオブジェクトが返されます。このオブジェクトは then の呼び出し内で使用できます。 POST リクエストを実行するために、ユーザー入力をキャプチャし、それを POST リクエストと共に追加しています。これによりレスポンスが得られます。レスポンスは console.log を使用してログに出力しています。これにより、フォームに入力された user の入力内容が表示されます。
次に、コンポーネントを App.js に追加します。全体のコードは以下のようになります：
|
1 2 3 4 5 6 7 8 9 10 11 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> </div> ) } |
それでは、変更をテストしてみましょう。開発サーバーを起動します：
|
1 |
npm start |
ウェブブラウザで変更を確認します：
ステップ 4: DELETEリクエストの構築
このセクションでは、 axios.delete の助けを借りて、URLをパラメータとしてAPIからアイテムを削除する方法を説明します。実演するために、 PersonRemove。ファイル PersonRemove.js を src/components ディレクトリに作成します：
|
1 |
touch src/components/PersonRemove.js |
その後、テキストエディタでファイルを開き、以下のコードを追加します：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import axios from 'axios'; export default class PersonRemove 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> ユーザーID: <input type="number" name="id" onChange={this.handleChange} /> </label> <button type="submit">削除</button> </form> </div> ) } } |
ここで、 res オブジェクトはリクエストに関する情報を提供します。その後、フォームが送信された後に console.log を使用できます。
次に、コンポーネントを App.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; import PersonRemove from './components/PersonRemove'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> <PersonRemove/> </div> ) } |
コードを再度テストしてみましょう。サーバーを起動します：
|
1 |
npm start |
ユーザー名を入力してリストから削除する新しいフォームが表示されるはずです：
ステップ 5: Axios でベースインスタンスを適用する
次に、Axios のベースインスタンスを使用します。ここでは、URL やその他の設定要素を定義できます。これを実装するには、別のファイル api.js:
|
1 |
touch src/api.js |
テキストエディタで開き、以下のコードを入力します：
|
1 2 3 4 5 |
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); |
設定が完了したら、 PersonRemove コンポーネント内で使用できます。コードは以下のようになります：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from 'react'; import API from '../api'; export default class PersonRemove 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 の実装
このセクションでは、プロミスを処理するために async と await を実装する方法を見ていきます。 await キーワードは promise を解決し、 value を返します。この value を変数に代入することで、より便利に使用できます。
更新された PersonRemove.js のコードは以下のようになります：
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); const response = await API.delete(`users/${this.state.id}`); console.log(response); console.log(response.data); } } |
ここでは、 .then()を置き換えました。一度 promiseが解決されると、その値を変数 response.
まとめ
このチュートリアルでは、Axiosを使用してREST APIを操作するさまざまな例を探索しました。コードは、HTTPリクエストの作成とレスポンスの処理を示しています。
JavaScriptについてさらに詳しく学びたいですか？JavaScriptのさまざまな概念や機能に関する、他の初心者向けガイドもぜひチェックしてみてください。例えば、日付と時間, 文字列操作, クラス、そしてオブジェクト.
ハッピーコンピューティング！
コメント
コメントはまだありません。最初のコメントを投稿しましょう。