Tech

React+axiosでhttpリクエスト

投稿日:

はじめに

こんにちは、nukkyです。
今回はReactでhttpリクエストを行ってみようと思います。使用するライブラリは「axios(アクシオス)」になります。

axiosとは

axiosとは、HTTP通信を簡単に扱えることができるJavaScriptライブラリです。HTTPリクエストを送ったり、JSONを取得したりするのが簡単に実装することが出来ます。

Make XMLHttpRequests from the browser
Make http requests from node.js
Supports the Promise API

https://github.com/axios/axios

特徴としては作者のページに上のような記述があります。内容を簡単に訳すと以下になります。

  • ブラウザからXMLHttpRequestが出来ます。
  • node.jsからhttp requestsが出来ます。
  • Promiseを扱うことが出来ます。

XMLHttpRequest

簡単に言ってしまえばAjaxの事です。以下Wikipediaより引用。

XMLHttpRequest (XHR) は、JavaScriptなどのウェブブラウザ搭載のスクリプト言語でサーバとのHTTP通信を行うための、組み込みオブジェクト(API)である。
すでに読み込んだページからさらにHTTPリクエストを発することができ、ページ遷移することなしにデータを送受信できるAjaxの基幹技術である。
XMLHttpRequestを利用したWebアプリケーションは非常に多く存在し、例として、Google マップ、Facebookなどが挙げられる。
出典: フリー百科事典『ウィキペディア(Wikipedia)』

Promise

PromiseはJavaScriptで非同期処理を扱う際に最終的な完了もしくは失敗を表すオブジェクトです。
Promiseを使うと、(コールバックのように)特定のコードの実行完了を待ってから次のコード片を実行できるようになります。
Promiseは、以下の3つのステートの1つを取ります。

  • pending: 非同期操作が完了していない
  • fulfilled: 操作が完了し、Promiseが値を1つ持つ
  • rejected : 操作がエラーまたは失敗で終了した

pending状態でないPromiseは安定しています。いったん安定したPromiseのステートは更新されず、他のステートに移行することはできません。

準備

インストールしたいプロジェクトで以下のコマンドを実行します。

私はnpmを使用していますが作者のページでは、bower、yarn、cdnでのインストール方法も記載されているので、そちらを扱う際は参照していただければと思います。

https://github.com/axios/axios

実装

axiosはGETやPOSTなど、様々なHTTPリクエストを投げることが出来ます。
まずはGETリクエストを送るメソッドの構文について解説します。

axios.getは引数を二つとり、第一引数にはエンドポイント、第二引数に渡したいパラメータをparamsで指定します。
そして、上記の書き方だとレスポンスが返ってきたかどうかで挙動が変わります。
レスポンスが返ってきた時
– 返ってきたデータがresultsの中に入り、thenが走る。
レスポンスが返ってこなかった時
– errorメッセージがerrorに入り、catchが走る。
このような流れでaxios.get()は動きます。

resultsの中身

成功パラメータであるresultsの中身は様々なデータが入ってるので、今一度確認しておきましょう。

基本的にはレスポンスデータを取得します。デフォルトではステータスコードが2xx系以外だと、レスポンスはエラーとして返されます。次に、エラーハンドリングの方法を解説します。

エラーハンドリング

axiosのエラーハンドリングは以下のサンプルのように直感的に書くことが出来ます。

上でステータスコードが2xx系以外だとエラーとして解釈されると書きましたが、自分でそのレンジを設定することも可能です。

上の場合は5xx以外ならthen()の処理に入るレンジに設定しています。

カスタムヘッダーの付与

アプリによっては独自のカスタムヘッダをリクエストに付与する必要があることが多いですが、axiosならそれも簡単に行うことができます。

React+axiosでhttpリクエストのサンプル

axiosの基本は抑えたと思うので、最後にタイトル通りReactでaxiosを使用するサンプルを書きたいと思います。

POST

POSTの場合は引数にPOSTパラメータを付与する形になります。

さいごに

axios如何だったでしょうか、駆け足での説明となってしまいましたが、クライアントのアプリで使用するような直感的でこちらの手間がかなり簡略化されるいいライブラリだと思いました。

おすすめ書籍

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE) React.js&Next.js超入門

blog-page_footer_336




blog-page_footer_336




-Tech
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

[Flutter]カメラのフレームデータを使ってリアルタイム画像認識

1 はじめに2 準備3 実装3.1 カメラプレビューの作成3.2 プレビューからフレームデータ取得3.3 フレームデータから画像認識3.4 画像認識した箇所に枠線の表示4 さいごに5 おすすめ書籍 は ...

ReactNative画面遷移

1 はじめに2 React Navigation3 React Navigationのインストール4 実装5 さいごに6 おすすめ書籍 はじめに こんにちはnukkyです。 ブログを書きながらアプリを ...

【Unity】TextMeshProで文字の表示と日本語入力

1 はじめに2 プロジェクトに追加3 TextMeshProのプロパティ4 日本語を使うには5 さいごに6 おすすめ書籍 はじめに こんにちはsuzukiです。unityをアップデートしたらTextが ...

no image

iOSでFirestoreを使ってみた その2

1 はじめに2 リスナーのアタッチ2.1 ドキュメントのリッスン2.2 複数ドキュメントのリッスン3 ドキュメントの変更タイプの取得4 リスナーのデタッチ5 さいごに6 おすすめ書籍 はじめに 以前、 ...

React初心者のRedux解説

1 はじめに2 Reduxとは2.1 そもそもReduxってなに?2.2 Fluxとは2.3 Reduxの3原則3 Reduxの要素3.1 Action3.2 Store3.3 State3.4 Re ...

フォロー

blog-page_side_responsive

2019年8月
 123
45678910
11121314151617
18192021222324
25262728293031

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。