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


関連記事

iOS13で申請するために押さえておきたいポイント

1 はじめに2 presentViewController3 DeviceToken4 Launch Storyboard5 Dark Mode6 Sign In with Apple7 さいごに8 ...

祝!iOS15でハーフモーダルが追加

1 はじめに2 早速使ってみる2.1 準備2.2 実装2.3 detents2.4 コードでの高さ切り替え2.5 モーダル内のスクロール許可2.6 グラバーの表示2.7 角丸2.8 親Viewとの併用 ...

Go言語

GoでSMF(MIDI)ファイルを読み込んでみた

1 はじめに2 MIDIとは?2.1 SMFファイルについて2.1.1 Tickと分解能2.1.2 トラックチャンク3 gomidiを使ってSMFファイルを読み込む3.1 gomidiの導入3.2 実 ...

Flutterで写真撮影しよう!

1 はじめに2 準備3 実装3.1 プレビューの表示3.2 写真を撮る4 さいごに5 おすすめ書籍 はじめに 今回はFlutterでカメラを使用して、プレビューの表示と写真の撮影を行いたいと思います。 ...

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

アプリ情報

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