logo

TechCodeview

React の Axios: 初心者向けガイド

React では、バックエンド通信は通常、HTTP プロトコルを使用して実現されます。多くの開発者は、HTTP リクエストを作成するための XML HTTP リクエスト インターフェイスと Fetch API に精通していますが、プロセスをさらに簡素化する Axios と呼ばれる別の強力なライブラリがあります。

目次



Axios の概要:

人気のあるライブラリである Axios は、主に非同期 HTTP リクエストを REST エンドポイントに送信するために使用されます。このライブラリは、CRUD 操作を実行するのに非常に役立ちます。

  1. この人気のあるライブラリは、バックエンドとの通信に使用されます。 Axios は、JS ES6 にネイティブな Promise API をサポートしています。
  2. Axios を使用して、アプリケーションで API リクエストを作成します。リクエストが行われると、Return でデータを取得し、このデータをプロジェクトで使用します。
  3. このライブラリは開発者の間で非常に人気があります。 GitHub で確認すると、78,000 個のスターが見つかります。

Axios をインストールする前に、React プロジェクト アプリでこのライブラリをインストールする準備ができている必要があります。を作成します 反応する 以下の手順に従ってお申し込みください…

React アプリケーションを作成する手順:

ステップ1： 以下は、プロジェクトに React アプリを作成するコマンドです。



npx create-react-app myreactapp>

ステップ2： 最初の手順で作成したディレクトリを入力します。

cd myreactapp>

ステップ 3: 以下のコマンドを使用して Axios ライブラリをインストールします…

npm i axios>

プロジェクトの構造:



2023-10-06-09-44-29 のスクリーンショット

ジャワの終わり

更新された依存関係 パッケージ.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) =>{});>>' }> >render() {> >return> (> >> >> > type='file' // To select multiple files multiple='multiple' onChange={(e) =>this.handleFile(e)} /> onClick={(e) => this.handleUpload(e)}> ファイルの送信 ); デフォルトのアプリをエクスポートします。>> 

>

>

アプリケーションを実行する手順: ターミナルを開き、次のコマンドを入力します。

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 でどのように機能するかを理解することが重要です。