React の Axios: 初心者向けガイド
React では、バックエンド通信は通常、HTTP プロトコルを使用して実現されます。多くの開発者は、HTTP リクエストを作成するための XML HTTP リクエスト インターフェイスと Fetch API に精通していますが、プロセスをさらに簡素化する Axios と呼ばれる別の強力なライブラリがあります。
目次
- 前提条件
- Axios の概要
- React アプリケーションを作成する手順
- React における Axios の必要性
- Axios を使用した GET リクエスト
- Axios を使用した POST リクエスト:
- Axios を使用した削除リクエスト:
- Axios の応答オブジェクト
- エラーオブジェクト:
- Axiosライブラリの特徴
- Axios の短縮メソッド
- 結論
Axios の概要:
人気のあるライブラリである Axios は、主に非同期 HTTP リクエストを REST エンドポイントに送信するために使用されます。このライブラリは、CRUD 操作を実行するのに非常に役立ちます。
- この人気のあるライブラリは、バックエンドとの通信に使用されます。 Axios は、JS ES6 にネイティブな Promise API をサポートしています。
- Axios を使用して、アプリケーションで API リクエストを作成します。リクエストが行われると、Return でデータを取得し、このデータをプロジェクトで使用します。
- このライブラリは開発者の間で非常に人気があります。 GitHub で確認すると、78,000 個のスターが見つかります。
Axios をインストールする前に、React プロジェクト アプリでこのライブラリをインストールする準備ができている必要があります。を作成します 反応する 以下の手順に従ってお申し込みください…
React アプリケーションを作成する手順:
ステップ1： 以下は、プロジェクトに React アプリを作成するコマンドです。
npx create-react-app myreactapp
ステップ2： 最初の手順で作成したディレクトリを入力します。
cd myreactapp
ステップ 3: 以下のコマンドを使用して Axios ライブラリをインストールします…
npm i axios
プロジェクトの構造:
更新された依存関係 パッケージ.json ファイル。
'dependencies': { '@testing-library/jest-dom': '^5.17.0', '@testing-library/react': '^13.4.0', '@testing-library/user-event': '^13.5.0', 'axios': '^1.6.2', 'react': '^18.2.0', 'react-dom': '^18.2.0', 'react-scripts': '5.0.1', 'web-vitals': '^2.1.4' }, 例： このコード スニペットは、axios を使用してバックエンド サーバーへの HTTP リクエストを作成します。
JavaScript
// Filename - App.js> import React from> 'react'> ;> import axios from> 'axios'> ;> class App extends React.Component {> > state = {> > newfiles:> null> ,> > };> > handleFile(e) {> > // Getting the files from the input> > let newfiles = e.target.newfiles;> > this> .setState({ newfiles });> > }> > handleUpload(e) {> > let newfiles => this> .state.newfiles;> > let formData => new> FormData();> > // Adding files to the formdata> > formData.append(> 'image'> , newfiles);> > formData.append(> 'name'> ,> 'Name'> );> > axios({> > // Endpoint to send files> > url:> ' http://localhost:8080/files '> ,> > method:> 'POST'> ,> > headers: {> > // Add any auth token here> > authorization:> 'your token comes here'> ,> > },> > // Attaching the form data> > data: formData,> > })> > // Handle the response from backend here> > .then((res) =>{})>> > // Catch errors if any> > .> catch> ((err) =>{});>>' |
アプリケーションを実行する手順: ターミナルを開き、次のコマンドを入力します。
npm start
出力： ブラウザを開くと、URL にプロジェクトが表示されます。 http://ローカルホスト:3000/
上記の例は、プロジェクトで Axios を使用する方法を示すための短いコードの説明にすぎません。次のセクションでは、Axios の GET、POST、PUT などの複数のメソッドについて説明します。
React における Axios の必要性:
すでに説明したように、Axios を使用すると、React プロジェクト内の API と通信できるようになります。 AJAX を使用しても同じタスクを実行できますが、Axios ではより多くの機能が提供され、アプリケーションを迅速に構築するのに役立ちます。
Axios は Promise ベースのライブラリであるため、Promise ベースの非同期 HTTP リクエストを実装する必要があります。 jQuery と AJAX も同じジョブを実行しますが、React プロジェクトでは React がすべてを独自の仮想 DOM で処理するため、jQuery を使用する必要はまったくありません。
以下は、Axios を使用して顧客のデータを取得する例です。
JavaScript
const getCustomersData = () =>{> > axios> > .get(> ' https://jsonplaceholder.typicode.com/customers '> )> > .then(data =>console.log(data.data))>> > .> catch> (error =>console.log(error));>> };> getCustomersData();> |
次のポイントに移り、Axios (GET-POST-DELETE) を使用したデータのフェッチやデータの消費など、さまざまな操作をどのように実行できるかを理解しましょう。
Axios を使用した GET リクエスト:
MyBlog コンポーネントを作成し、それをコンポーネント DidMount ライフサイクルにフックします。上部のAxiosをインポートし、Getリクエストでデータを取得します。
JavaScript
// Filename - App.js> import React from> 'react'> ;> import axios from> 'axios'> ;> export> default> class MyList extends React.Component {> > state = {> > blogs: [],> > };> > componentDidMount() {> > axios> > .get(> > `https:> //jsonplaceholder.typicode.com/posts`> > )> > .then((response) =>{> > const posts = response.data;> > this> .setState({ posts });> > });> > }> > render() {> > return> (> > > > > {> this> .state.posts.map((post) =>{> > post.title;> > })}> > > > );> > }> }> |
ここでは axios.get (URL) を使用して、応答オブジェクトを返す Promise を取得しています。返されたレスポンスは投稿のオブジェクトに割り当てられます。ステータスコードなどの他の情報も取得できます。
Axios を使用した POST リクエスト:
Post リクエスト用の新しいコンポーネント AddPost を作成します。このリクエストにより、投稿リストに投稿が追加されます。
JavaScript
// Filename - App.js> import React from> 'react'> ;> import axios from> 'axios'> ;> export> default> class AddPost extends React.Component {> > state = {> > postTitle:> ''> ,> > };> > handleChange = (event) =>{> > this> .setState({ postTitle: event.target.value });> > };> > handleSubmit = (event) =>{> > event.preventDefault();> > const post = {> > postName:> this> .state.postName,> > };> > axios> > .post(> > `https:> //jsonplaceholder.typicode.com/posts`,> > { post }> > )> > .then((res) =>{> > console.log(res);> > console.log(res.data);> > });> > };> > render() {> > return> (> > > > '{this.handleSubmit}'>投稿名: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Add ); } }>> |
上記のコードでは、HTTP Post リクエストを作成し、データベースに新しい投稿を追加しました。 onChange イベントはメソッド handleChange() をトリガーし、API リクエストがデータを正常に返したときにリクエストを更新します。
Axios を使用した削除リクエスト:
削除リクエストをサーバーに送信するには、axios.delete を使用します。このリクエスト URL とオプションの構成を作成する際には、2 つのパラメーターを指定する必要があります。
axios.delete(url, { data: { foo: 'bar' }, headers: { 'Authorization': '******' } }); 削除リクエストの送信中に、リクエストの本文とヘッダーを設定する必要があります。この目的には config.data を使用します。上記の POST リクエストで、コードを以下のように変更します。
JavaScript
handleSubmit = event =>{> > event.preventDefault();> > axios.> delete> (> > `https:> //jsonplaceholder.typicode.com/posts/${this.state.postName}`)> > .then(res =>{> > console.log(res);> > console.log(res.data);> > })> }> |
Axios の応答オブジェクト:
サーバーにリクエストを送信すると、以下のプロパティを持つ応答オブジェクトをサーバーから受け取ります。
- データ： サーバーからデータをペイロード形式で受信します。このデータは JSON 形式で返され、解析されて JavaScript オブジェクトに戻されます。
- 状態： サーバーから返された HTTP コードを取得します。
- ステータステキスト: サーバーから返された HTTP ステータス メッセージ。
- ヘッダー: すべてのヘッダーはサーバーによって返送されます。
- 構成: 元のリクエスト構成。
- リクエスト： 実際の XMLHttpRequest オブジェクト。
エラーオブジェクト:
リクエストに問題がある場合は、エラー オブジェクトが返されます。 Promise は、指定されたプロパティを持つエラー オブジェクトで拒否されます。
- メッセージ： エラーメッセージのテキスト。
- 応答： 応答オブジェクト (受信した場合)。
- リクエスト： 実際の XMLHttpRequest オブジェクト (ブラウザーで実行する場合)。
- 構成: 元のリクエスト構成。
Axiosライブラリの特徴
- JSON データは自動的に変換されます。
- リクエストとレスポンスのデータを変換します。
- Node.js から HTTP リクエストを行う場合に便利です
- ブラウザから XMLHttpRequest を作成します。
- XSRF から保護するためのクライアント側のサポートを提供します。
- プロミスAPIをサポートします。
- リクエストをキャンセルする機能。
Axios の短縮メソッド:
以下は、Axios のいくつかの短縮メソッドです。
- axios.request(構成)
- axios.head(url[, config])
- axios.get(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.delete(url[, config])
- axios.options(url[, config])
- axios.patch(url[, data[, config]])
結論
この記事では、Axios ライブラリについてすべて説明しました。 Axios でのデータのフェッチ、データのポスト、データの更新、データの削除など、いくつかの便利な操作について説明しました。 React での作業を開始したら、このライブラリを使用してデータベース サーバーと通信する必要があります。したがって、それを実践し、Axios でどのように機能するかを理解することが重要です。
