ReactでAxiosを使用する方法

序章

Web上の多くのプロジェクトは、開発のある段階でRESTAPIとインターフェースする必要があります。 Axios は、Angular.jsv1.x内の$httpサービスに基づく軽量のHTTPクライアントであり、ネイティブJavaScript FetchAPIに似ています。

Axiosはpromiseベースであり、JavaScriptのasyncおよびawaitを利用してより読みやすい非同期コードを作成できます。

リクエストをインターセプトしてキャンセルすることもでき、クロスサイトリクエストフォージェリに対するクライアント側の保護が組み込まれています。

この記事では、Axiosを使用してReactアプリケーション内で人気のあるJSONプレースホルダーAPIにアクセスする方法の例を紹介します。

前提条件

この記事をフォローするには、次のものが必要です。

• Node.jsバージョン10.16.0がコンピューターにインストールされています。 これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはのPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04にNode.jsをインストールする方法。
• Reactアプリの作成チュートリアルに従ってReactプロジェクトをセットアップする方法に従ってReactアプリを作成でセットアップされた新しいReactプロジェクト。
• また、JavaScriptシリーズのコーディング方法にあるJavaScriptの基本的な知識と、HTMLおよびCSSの基本的な知識も役立ちます。

このチュートリアルは、Node.js v16.13.1、npm v8.1.4、react v17.0.2、およびaxiosv0.24.0で検証されました。

ステップ1—プロジェクトにAxiosを追加する

このセクションでは、Reactアプリの作成チュートリアルでReactプロジェクトをセットアップする方法に従って作成したReactプロジェクトにAxiosを追加します。

npx create-react-app react-axios-example

プロジェクトにAxiosを追加するには、ターミナルを開き、プロジェクトのディレクトリを変更します。

cd react-axios-example

次に、次のコマンドを実行してAxiosをインストールします。

npm install [email protected]

次に、Axiosを使用するファイルにインポートする必要があります。

ステップ2—GETリクエストを作成する

この例では、新しいコンポーネントを作成し、そのコンポーネントにAxiosをインポートして、GETリクエストを送信します。

Reactプロジェクト内で、PersonListという名前の新しいコンポーネントを作成する必要があります。

まず、srcディレクトリに新しいcomponentsサブディレクトリを作成します。

mkdir src/components

このディレクトリで、PersonList.jsを作成し、次のコードをコンポーネントに追加します。

src / components / 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 key={person.id}>{person.name}</li>
            )
        }
      </ul>
    )
  }
}

まず、ReactとAxiosをインポートして、両方をコンポーネントで使用できるようにします。 次に、componentDidMountライフサイクルフックにフックして、GETリクエストを実行します。

axios.get(url)をAPIエンドポイントからのURLとともに使用して、応答オブジェクトを返すPromiseを取得します。 応答オブジェクト内には、personの値が割り当てられるデータがあります。

res.statusの下のステータスコードや、res.request内の詳細情報など、リクエストに関するその他の情報を取得することもできます。

このコンポーネントをapp.jsに追加します。

src / app.js

import PersonList from './components/PersonList.js';

function App() {
  return (
    <div ClassName="App">
      <PersonList/>
    </div>
  )
}

次に、アプリケーションを実行します。

npm start

ブラウザでアプリケーションを表示します。 10個の名前のリストが表示されます。

ステップ3—POSTリクエストを作成する

このステップでは、POSTと呼ばれる別のHTTPリクエストメソッドでAxiosを使用します。

Reactプロジェクト内で、PersonAddという名前の新しいコンポーネントを作成する必要があります。

PersonAdd.jsを作成し、次のコードを追加して、ユーザー入力とその後のPOSTコンテンツをAPIに送信できるフォームを作成します。

src / components / PersonAdd.js

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>
            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入力が表示されます。

このコンポーネントをapp.jsに追加します。

src / app.js

import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';

function App() {
  return (
    <div ClassName="App">
      <PersonAdd/>
      <PersonList/>
    </div>
  )
}

次に、アプリケーションを実行します。

npm start

ブラウザでアプリケーションを表示します。 新規ユーザーを送信するためのフォームが表示されます。 新しいユーザーを送信した後、コンソールを確認してください。

ステップ4—DELETEリクエストを作成する

この例では、axios.deleteを使用し、パラメーターとしてURLを渡すことでAPIからアイテムを削除する方法を説明します。

Reactプロジェクト内で、PersonRemoveという名前の新しいコンポーネントを作成する必要があります。

PersonRemove.jsを作成し、次のコードを追加してユーザーを削除します。

src / PersonRemove.js

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>
            Person ID:
            <input type="number" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

この場合も、resオブジェクトはリクエストに関する情報を提供します。 フォームが送信された後、その情報を再度console.logすることができます。

このコンポーネントをapp.jsに追加します。

src / app.js

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>
  )
}

次に、アプリケーションを実行します。

npm start

ブラウザでアプリケーションを表示します。 ユーザーを削除するためのフォームが表示されます。

ステップ5—Axiosでベースインスタンスを使用する

この例では、URLやその他の構成要素を定義できるベースインスタンスを設定する方法を説明します。

api.jsという名前の別のファイルを作成します。

nano src/api.js

次のデフォルトで新しいaxiosインスタンスをエクスポートします。

src / api.js

import axios from 'axios';

export default axios.create({
  baseURL: `http://jsonplaceholder.typicode.com/`
});

デフォルトのインスタンスを設定すると、PersonRemoveコンポーネント内で使用できるようになります。 次のように新しいインスタンスをインポートします。

src / components / PersonRemove.js

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を使用してPromiseを操作する方法を説明します。

awaitキーワードは、promiseを解決し、valueを返します。 次に、valueを変数に割り当てることができます。

src / components / PersonRemove.js

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変数内に格納されます。

結論

このチュートリアルでは、Reactアプリケーション内でAxiosを使用してHTTPリクエストを作成し、レスポンスを処理する方法に関するいくつかの例を検討しました。

Reactの詳細については、 React.js シリーズのコーディング方法を確認するか、Reactトピックページでその他の演習やプログラミングプロジェクトを確認してください。