ReactアプリケーションでのREST APIの使用はさまざまな方法で実行できますが、このチュートリアルでは、次のように知られている最も一般的なXNUMXつのメソッドを使用してREST APIを使用する方法について説明します。 Axios （promiseベースのHTTPクライアント）および APIをフェッチ （ブラウザに組み込まれたWeb API）。 これらの方法のそれぞれについて詳細に説明および実装し、それぞれが提供する優れた機能のいくつかを明らかにします。
APIは、Reactアプリケーションにデータを追加するために使用できるものです。 クライアント側では実行できない特定の操作があるため、これらの操作はサーバー側で実装されます。 次に、APIを使用して、クライアント側でデータを使用できます。
APIは、多くの場合、指定されたエンドポイントを持つJSON形式のデータのセットで構成されています。 APIからデータにアクセスする場合、そのAPIフレームワーク内の特定のエンドポイントにアクセスする必要があります。 APIは、要求と応答という形でXNUMXつのサービス間の契約上の合意であるとも言えます。 コードは単なる副産物です。 また、このデータ交換の条件も含まれています。
Reactには、アプリケーションでREST APIを使用するさまざまな方法があります。これらの方法には、組み込みのJavaScriptの使用が含まれます fetch() メソッドと、ブラウザーおよびNode.js向けのpromiseベースのHTTPクライアントであるAxios。
注： このチュートリアルを進める中で、ReactJS、React Hooks、JavaScript、CSSに関する十分な知識が役立ちます。
REST APIについてさらに学びましょう。
REST APIとは
A REST API に従って構造化されたものに従うAPIです。 RESTの構造 API用。 RESTは「Representational State Transfer」の略です。 これは、開発者がAPIを作成するときに従うさまざまなルールで構成されています。
REST APIの利点
- 学習と理解が非常に簡単。
- 複雑なアプリケーションを単純なリソースに整理する機能を開発者に提供します。
- 外部クライアントがREST APIを複雑にせずに構築するのは簡単です。
- スケーリングは非常に簡単です。
- REST APIは言語やプラットフォーム固有ではありませんが、任意の言語で使用したり、任意のプラットフォームで実行したりできます。
REST API応答の例
REST APIの構造は、作成された製品によって異なりますが、RESTのルールに従う必要があります。
以下のサンプル応答は、 Github オープン API。 このチュートリアルの後半で、このAPIを使用してReactアプリを作成します。
{ "login": "hacktivist123", "id": 26572907, "node_id": "MDQ6VXNlcjI2NTcyOTA3", "avatar_url": "https://avatars3.githubusercontent.com/u/26572907?v=4", "gravatar_id": "", "url": "https://api.github.com/users/hacktivist123", "html_url": "https://github.com/hacktivist123", "followers_url": "https://api.github.com/users/hacktivist123/followers", "following_url": "https://api.github.com/users/hacktivist123/following{/other_user}", "gists_url": "https://api.github.com/users/hacktivist123/gists{/gist_id}", "starred_url": "https://api.github.com/users/hacktivist123/starred{/owner}{/repo}", "subscriptions_url": "https://api.github.com/users/hacktivist123/subscriptions", "organizations_url": "https://api.github.com/users/hacktivist123/orgs", "repos_url": "https://api.github.com/users/hacktivist123/repos", "events_url": "https://api.github.com/users/hacktivist123/events{/privacy}", "received_events_url": "https://api.github.com/users/hacktivist123/received_events", "type": "User", "site_admin": false, "name": "Shedrack akintayo", "company": null, "blog": "https://sheddy.xyz", "location": "Lagos, Nigeria ", "email": null, "hireable": true, "bio": "☕ Software Engineer | | Developer Advocate🥑|| ❤ Everything JavaScript", "public_repos": 68, "public_gists": 1, "followers": 130, "following": 246, "created_at": "2017-03-21T12:55:48Z", "updated_at": "2020-05-11T13:02:57Z"
}
上記の応答は、Github REST APIからのものです。 GET 次のエンドポイントへのリクエスト https://api.github.com/users/hacktivist123。 呼び出されたユーザーに関するすべての保存データを返します ハックティビスト123。 この応答により、Reactアプリで好きなようにレンダリングすることを決定できます。
Fetch APIを使用したAPIの使用
fetch() APIは、サーバーまたはAPIエンドポイントからリソースを取得するための組み込みのJavaScriptメソッドです。 それはに似ています XMLHttpRequestしかし、 フェッチAPI より強力で柔軟な機能セットを提供します。
それは次のような概念を定義します CORS と HTTP Originヘッダー セマンティクス、別の場所でそれらの個別の定義に取って代わる。
fetch() APIメソッドは常に強制的な引数を受け取ります。これは、フェッチするリソースへのパスまたはURLです。 リクエストが成功したかどうかにかかわらず、リクエストからのレスポンスを指すpromiseを返します。 オプションで、XNUMX番目の引数として初期化オプションオブジェクトを渡すこともできます。
応答がフェッチされると、本文の内容とその処理方法を定義するために使用できる組み込みのメソッドがいくつかあります。
Fetch APIとjQuery Ajaxの違い
Fetch APIは jQuery アヤックス 主に次のXNUMXつの方法があります。
- から返された約束
fetch()応答ステータスの性質に関係なく、HTTPエラーが発生しても要求は拒否されません。 代わりに、リクエストを正常に解決します。応答ステータスコードが400または500タイプコードの場合、okステータスを設定します。 リクエストは、ネットワーク障害が発生した場合、または何かがリクエストの完了を妨げている場合にのみ拒否されます fetch()クロスサイトCookieの使用は許可されません。つまり、次を使用してクロスサイトセッションを実行できません。fetch()fetch()また、あなたが設定しない限り、デフォルトでクッキーを送信しませんcredentialsinitオプション内。
Fetch APIのパラメーター
resource
これは、フェッチするリソースへのパスです。これは、リソースパスへの直接リンクまたはリクエストオブジェクトのいずれかです。init
これは、カスタム設定または資格情報を提供するオブジェクトを含みます。fetch()リクエスト。 以下は、に含めることができる可能なオプションのいくつかです。initオブジェクト：method
これは、GET、POSTなどのHTTPリクエストメソッドを指定するためのものです。headers
これは、リクエストに追加するヘッダーを指定するためのもので、通常はオブジェクトまたはオブジェクトリテラルに含まれています。body
これは、リクエストに追加する本文を指定するためのものです。これは、Blob,BufferSource,FormData,URLSearchParams,USVStringまたはReadableStreamオブジェクトmode
これは、リクエストに使用するモードを指定するためのものです。たとえば、cors,no-corsまたはsame-origin.credentials
これは、要求に使用する要求の資格情報を指定するために、現在のドメインのCookieを自動的に送信することを検討する場合は、このオプションを提供する必要があります。
Fetch（）APIを使用するための基本的な構文
基本的なフェッチ要求は非常に簡単に記述できます。次のコードを見てください。
fetch('https://api.github.com/users/hacktivist123/repos') .then(response => response.json()) .then(data => console.log(data));
上記のコードでは、データをJSONとして返すURLからデータをフェッチし、それをコンソールに出力しています。 fetch（）を使用する最も単純な形式は、多くの場合、フェッチするリソースへのパスである引数をXNUMXつだけ取り、フェッチ要求からの応答を含むpromiseを返します。 この応答はオブジェクトです。
応答は通常のHTTP応答であり、実際のJSONではありません。 他の方法では、応答からJSON本文コンテンツを取得するために、応答でjson（）メソッドを使用して応答を実際のJSONに変更する必要があります。
ReactアプリでのFetch APIの使用
ReactアプリでFetch APIを使用するのは、JavaScriptでFetch APIを使用する通常の方法です。構文に変更はありません。唯一の問題は、Reactアプリでフェッチリクエストをどこに送信するかを決定することです。 ほとんどのフェッチ要求またはあらゆる種類のHTTP要求は通常、Reactコンポーネントで行われます。
このリクエストは、 ライフサイクルメソッド コンポーネントがクラスコンポーネントの場合、または useEffect() リアクトフック コンポーネントが機能コンポーネントの場合。
たとえば、次のコードでは、クラスコンポーネント内でフェッチリクエストを作成します。つまり、ライフサイクルメソッド内でフェッチリクエストを実行する必要があります。 この特定のケースでは、フェッチリクエストは componentDidMount React Componentがマウントされた直後にリクエストを作成するため、ライフサイクルメソッド。
import React from 'react'; class myComponent extends React.Component { componentDidMount() { const apiUrl = 'https://api.github.com/users/hacktivist123/repos'; fetch(apiUrl) .then((response) => response.json()) .then((data) => console.log('This is your data', data)); } render() { return <h1>my Component has Mounted, Check the browser 'console' </h1>; }
}
export default myComponent;
上記のコードでは、Reactコンポーネントのマウントが完了した後、API URLに対して行ったフェッチ要求からの最終データをブラウザーコンソールに記録するフェッチ要求を行う非常に単純なクラスコンポーネントを作成しています。
fetch() メソッドは、フェッチするリソースへのパスを受け取ります。これは、次の変数に割り当てられています apiUrl。 フェッチ要求が完了すると、応答オブジェクトを含むpromiseを返します。 次に、応答からJSON本文コンテンツを抽出します。 json() メソッド、最後に、promiseの最終データをコンソールに記録します。
FetchメソッドでREST APIを消費しましょう
このセクションでは、外部APIを使用する単純な反応アプリケーションを作成し、Fetchメソッドを使用してAPIを使用します。
シンプルなアプリケーションは、特定のユーザーに属するすべてのリポジトリとその説明を表示します。 このチュートリアルでは、GitHubのユーザー名を使用します。必要に応じて、ユーザー名を使用することもできます。
最初に行う必要があるのは、次を使用してReactアプリを生成することです create-react-app:
npx create-react-app myRepos
上記のコマンドは、新しいReactアプリをブートストラップします。 新しいアプリが作成されたら、あとは、次のコマンドを実行してコーディングを開始するだけです。
npm start
Reactが適切に作成されている場合、次の場所に移動すると、ブラウザーウィンドウにこれが表示されます localhost:3000 上記のコマンドを実行した後。
(大きなプレビュー)
あなたの中で src フォルダ、という新しいフォルダを作成します component。 このフォルダーには、すべてのReactコンポーネントが含まれます。 新しいフォルダに、XNUMXつのファイルを作成します。 リスト.js および withListLoading.js。 これらXNUMXつのファイルには、アプリで必要になるコンポーネントが含まれます。
リスト.js ファイルは、リストの形式でリポジトリの表示を処理し、 withListLoading.js fileには、作成するFetchリクエストがまだ進行中のときに表示される高次コンポーネントが含まれます。
リスト.js 内部に作成したファイル components フォルダ、次のコードに貼り付けましょう：
import React from 'react';
const List = (props) => { const { repos } = props; if (!repos || repos.length === 0) return <p>No repos, sorry</p>; return ( <ul> <h2 className='list-head'>Available Public Repositories</h2> {repos.map((repo) => { return ( <li key={repo.id} className='list'> <span className='repo-text'>{repo.name} </span> <span className='repo-description'>{repo.description}</span> </li> ); })} </ul> );
};
export default List;
上記のコードは、データ（この場合はリポジトリ名とその説明）をリストに表示する基本的なReactリストコンポーネントです。
それでは、コードを少しずつ説明しましょう。
const { repos } = props;
reposというコンポーネントのプロップを初期化しています。
if (repos.length === 0 || !repos) return <p>No repos, sorry</p>;
ここで行っているのは、作成したリクエストから取得したリポジトリの長さがゼロに等しい場合にメッセージを表示する条件付きステートメントを作成することだけです。
return ( <ul> <h2 className='list-head'>Available Public Repositories</h2> {repos.map((repo) => { return ( <li key={repo.id} className='list'> <span className='repo-text'>{repo.name} </span> <span className='repo-description'>{repo.description}</span> </li> ); })} </ul> );
ここでは、APIリクエストによって提供される各リポジトリをマッピングし、各リポジトリの名前と説明を抽出して、それぞれをリストに表示しています。
export default List;
ここでは、 List 他の場所で使用できるようにコンポーネント。
withListLoading.js コンポーネントフォルダー内に作成したファイルを次のコードに貼り付けます。
import React from 'react'; function WithListLoading(Component) { return function WihLoadingComponent({ isLoading, ...props }) { if (!isLoading) return <Component {...props} />; return ( <p style={{ textAlign: 'center', fontSize: '30px' }}> Hold on, fetching data may take some time :) </p> ); };
}
export default WithListLoading;
上記のコードは、別のコンポーネントを受け取り、いくつかのロジックを返す高次のReactコンポーネントです。 私たちのケースでは、上位のコンポーネントは、現在の isLoading それが取るコンポーネントの状態は true or false。 現在の場合 isLoading 状態はtrue、メッセージを表示します しばらくお待ちください。データのフェッチには時間がかかることがあります🙂。 すぐに isLoading 状態の変化 false 取り込んだコンポーネントをレンダリングします。この例では、 リスト コンポーネント。
あなたの*App.js 内部のファイル SRC フォルダ、次のコードに貼り付けましょう：
import React, { useEffect, useState } from 'react';
import './App.css';
import List from './components/List';
import withListLoading from './components/withListLoading';
function App() { const ListLoading = withListLoading(List); const [appState, setAppState] = useState({ loading: false, repos: null, }); useEffect(() => { setAppState({ loading: true }); const apiUrl = `https://api.github.com/users/hacktivist123/repos`; fetch(apiUrl) .then((res) => res.json()) .then((repos) => { setAppState({ loading: false, repos: repos }); }); }, [setAppState]); return ( <div className='App'> <div className='container'> <h1>My Repositories</h1> </div> <div className='repo-container'> <ListLoading isLoading={appState.loading} repos={appState.repos} /> </div> <footer> <div className='footer'> Built{' '} <span role='img' aria-label='love'> 💚 </span>{' '} with by Shedrack Akintayo </div> </footer> </div> );
}
export default App;
App.jsは、React Hooksを使用して状態と副作用を処理する機能コンポーネントです。 React Hooksに詳しくない場合は、 React Hooks Guide入門
上記のコードを少しずつ説明します。
import React, { useEffect, useState } from 'react';
import './App.css';
import List from './components/List';
import withListLoading from './components/withListLoading';
ここでは、必要なすべての外部ファイルと、コンポーネントフォルダーに作成したコンポーネントをインポートしています。 また、Reactから必要なReactフックをインポートしています。
const ListLoading = withListLoading(List); const [appState, setAppState] = useState({ loading: false, repos: null, });
ここでは、新しいコンポーネントを作成しています ListLoading そして私たちの割り当て withListLoading リストコンポーネントを囲む高次コンポーネント。 次に、状態値を作成します loading および repos useState() 反応フック。
useEffect(() => { setAppState({ loading: true }); const user = `https://api.github.com/users/hacktivist123/repos`; fetch(user) .then((res) => res.json()) .then((repos) => { setAppState({ loading: false, repos: repos }); }); }, [setAppState]);
ここでは、 useEffect() 反応フック。 の中に useEffect() フックでは、初期の読み込み状態をtrueに設定していますが、これはtrueですが、高次コンポーネントはメッセージを表示します。 次に、定数変数を作成します user リポジトリデータを取得するAPI URLを割り当てます。
次に、基本的な fetch() 上記で説明したようにリクエストし、リクエストが完了した後、アプリのロード状態をfalseに設定し、リクエストから取得したデータをリポジトリの状態に入力します。
return ( <div className='App'> <div className='container'> <h1>My Repositories</h1> </div> <div className='repo-container'> <ListLoading isLoading={AppState.loading} repos={AppState.repos} /> </div> </div> );
}
export default App;
ここでは基本的に、高次コンポーネントを割り当てたコンポーネントをレンダリングし、 isLoading 小道具と repos それらの状態値で小道具。
これで、ブラウザにこれが表示されるはずです。フェッチ要求がまだ行われているときは、 withListLoading 高次成分：
(大きなプレビュー)
これで、フェッチ要求が正常に完了すると、次のようにリスト形式でリポジトリが表示されます。
(大きなプレビュー)
次に、プロジェクトのスタイルを設定します。 アプリCSS ファイル、このコードをコピーして貼り付けます。
@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');
:root { --basic-color: #23cc71;
}
.App { box-sizing: border-box; display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: 'Amiri', serif; overflow: hidden;
}
.container { display: flex; flex-direction: row;
}
.container h1 { font-size: 60px; text-align: center; color: var(--basic-color);
}
.repo-container { width: 50%; height: 700px; margin: 50px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); overflow: scroll;
}
@media screen and (max-width: 600px) { .repo-container { width: 100%; margin: 0; box-shadow: none; }
}
.repo-text { font-weight: 600;
}
.repo-description { font-weight: 600; font-style: bold; color: var(--basic-color);
}
.list-head { text-align: center; font-weight: 800; text-transform: uppercase;
}
.footer { font-size: 15px; font-weight: 600;
}
.list { list-style: circle;
}
上記のコードでは、アプリをより見栄えよくするためにスタイリングしています。さまざまなクラス名を各要素に割り当てています。 App.js ファイル、したがってこれらのクラス名を使用してアプリのスタイルを設定しています。
スタイリングを適用すると、アプリは次のようになります。
(大きなプレビュー)
今、私たちのアプリははるかに良く見えます。 😊
これが、Fetch APIを使用してREST APIを使用する方法です。 次のセクションでは、Axiosと、それを使用して同じアプリで同じAPIを使用する方法について説明します。
AxiosでAPIを使用する
Axiosは、ブラウザーおよびnode.js用の使いやすいpromiseベースのHTTPクライアントです。 Axiosはpromiseベースであるため、asyncを利用して、より読みやすく非同期なコードを待つことができます。 Axiosを使用すると、リクエストをインターセプトおよびキャンセルする機能が得られます。また、クロスサイトリクエストフォージェリに対するクライアント側の保護を提供する組み込み機能も備えています。
Axiosの機能
- リクエストとレスポンスのインターセプト
- 合理化されたエラー処理
- に対する保護 XSRF
- アップロードの進行状況のサポート
- 応答タイムアウト
- リクエストをキャンセルする機能
- 古いブラウザのサポート
- 自動JSONデータ変換
Axiosを使用したリクエスト
Axiosを使用したHTTPリクエストの作成は非常に簡単です。 以下のコードは、基本的にHTTPリクエストを作成する方法です。
// Make a GET request
axios({ method: 'get', url: 'https://api.github.com/users/hacktivist123',
}); // Make a Post Request
axios({ method: 'post', url: '/login', data: { firstName: 'shedrack', lastName: 'akintayo' }
});
上記のコードは、Axiosを使用してGETおよびPOST HTTPリクエストを作成する基本的な方法を示しています。
Axiosは、さまざまなHTTPリクエストを実行するための一連の簡略メソッドも提供しています。 メソッドは次のとおりです。
axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.options(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])
たとえば、上記のサンプルコードのような同様のリクエストを作成したいが、簡略メソッドを使用すると、次のように実行できます。
// Make a GET request with a shorthand method
axios.get('https://api.github.com/users/hacktivist123'); // Make a Post Request with a shorthand method
axios.post('/signup', { firstName: 'shedrack', lastName: 'akintayo'
});
上記のコードでは、上記と同じリクエストを行っていますが、今回は省略メソッドを使用しています。 Axiosは柔軟性を提供し、HTTPリクエストをさらに読みやすくします。
Axiosで複数のリクエストを行う
Axiosは、開発者が axios.all() 方法。 このメソッドは引数の配列を受け取り、配列で渡されたすべての引数が解決された場合にのみ解決される単一のpromiseオブジェクトを返します。
たとえば、GitHub apiに複数のリクエストを送信するには、 axios.all() そのような方法：
axios.all([ axios.get('https://api.github.com/users/hacktivist123'), axios.get('https://api.github.com/users/adenekan41')
])
.then(response => { console.log('Date created: ', response[0].data.created_at); console.log('Date created: ', response[1].data.created_at);
});
上記のコードは、引数の配列に対して同時にリクエストを実行し、応答データを返します。この場合、コンソールにログを記録します。 created_at 各API応答からのオブジェクト。
AxiosクライアントでREST APIを消費しましょう
このセクションでは、置き換えるのは fetch() 既存のReactアプリケーションでAxiosを使用する方法。 必要なのは、Axiosをインストールし、それをApp.jsファイルで使用して、GitHub APIにHTTPリクエストを送信することだけです。
次のいずれかを実行して、RexアプリにAxiosをインストールしましょう。
NPMの場合：
npm install axios
糸で：
yarn add axios
インストールが完了したら、axiosをApp.jsにインポートする必要があります。 App.jsで、App.jsファイルの先頭に次の行を追加します。
import axios from 'axios'
コード行を追加した後、 App.js 私たちの中でやらなければならないすべて useEffect() 次のコードを書くことです：
useEffect(() => { setAppState({ loading: true }); const apiUrl = 'https://api.github.com/users/hacktivist123/repos'; axios.get(apiUrl).then((repos) => { const allRepos = repos.data; setAppState({ loading: false, repos: allRepos }); }); }, [setAppState]);
フェッチAPIをAxios省略メソッドに置き換えたことに気づいたかもしれません axios.get 作るために get APIへのリクエスト。
axios.get(apiUrl).then((repos) => { const allRepos = repos.data; setAppState({ loading: false, repos: allRepos }); });
このコードブロックでは、GETリクエストを作成してから、reposデータを含むpromiseを返し、そのデータを次の定数変数に割り当てています allRepos。 次に、現在の読み込み状態をfalseに設定し、リクエストからrepos状態変数にデータを渡します。
すべてを正しく行った場合、アプリは変更なしで同じようにレンダリングされることを確認できます。
(大きなプレビュー)
これが、Axiosクライアントを使用してREST APIを使用する方法です。
フェッチvsアクシオス
このセクションでは、特定の機能をリストしてから、FetchとAxiosがこれらの機能をどの程度サポートしているかについて説明します。
-
基本的な構文
FetchとAxiosの両方に、リクエストを行うための非常に単純な構文があります。 ただし、Axiosは自動的に応答をJSONに変換するため、Axiosの方が有利です。したがって、Axiosを使用する場合は、応答をJSONに変換する必要があるFetch（）とは異なり、応答をJSONに変換する手順をスキップします。 最後に、Axiosの簡略メソッドを使用すると、特定のHTTPリクエストを簡単に作成できます。 -
ブラウザの互換性
開発者がFetchよりもAxiosを好む多くの理由の42つは、AxiosがChrome 39以降、Firefox 14以降、Edge 10.1以降、Safari XNUMX以降でのみサポートされているFetchとは異なり、主要なブラウザーとバージョンでサポートされているためです。 -
応答タイムアウトの処理
レスポンスのタイムアウトの設定は、Axiosでtimeoutリクエストオブジェクト内のオプション。 しかし、Fetchでは、これを行うのはそれほど簡単ではありません。 Fetchは、AbortController()インターフェースですが、実装に時間がかかり、混乱する可能性があります。 -
HTTPリクエストのインターセプト
Axiosを使用すると、開発者はHTTPリクエストを傍受できます。 HTTPリクエストをアプリケーションからサーバーに変更する必要がある場合は、HTTPインターセプターが必要です。 インターセプターを使用すると、追加のコードを記述せずにそれを行うことができます。 -
複数のリクエストを同時に行う
Axiosを使用すると、複数のHTTPリクエストをaxios.all()メソッド（これについては前述しました）。fetch()を使用して同じ機能を提供しますpromise.all()メソッド、複数作成することができますfetch()その中の要求。
まとめ
Axiosおよび fetch() APIを使用する優れた方法ですが、使用することをお勧めします fetch() 比較的小さなアプリケーションを構築する場合、およびスケーラビリティの理由で大きなアプリケーションを構築する場合にAxiosを利用します。 このチュートリアルを楽しんでいただけたと思います。FetchまたはAxiosのいずれかを使用したREST APIの利用について、以下のリファレンスからいつでも詳細を読むことができます。 ご不明な点がございましたら、下のコメント欄にご記入ください。すべてにお答えいたします。
関連リソース
（ks、ra、il）出典：https://www.smashingmagazine.com/2020/06/rest-api-react-fetch-axios/
