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


関連記事

ReactNative入門

1 はじめに2 そもそもReact Nativeとは3 JSXとは3.1 JSXに値を埋め込む3.2 属性の値を設定する3.3 関数でJSXを作る4 コンポーネントとは4.1 再利用性4.2 新規コン ...

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

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

[C#]Genericsの使い方をまとめてみた。その2

1 はじめに2 Genericsの構文3 型パラメーター4 制約条件5 規定値6 さいごに7 おすすめ書籍 はじめに こんにちはsuzukiです。ブログを書いているときAndroid10が発表され、ア ...

ReactNative環境構築[Android/iOS]

1 はじめに2 準備2.1 HomeBrewをインストール2.2 node.jsのインストール2.3 Watchmanのインストール2.4 React Native CLIのインストール2.5 サンプ ...

[Unity]Terrain(地形)を使ってみた その2

1 はじめに2 Paint Trees3 Paint Details4 おまけ5 さいごに6 おすすめ書籍 はじめに こんにちはsuzukiです。前回に引き続きTerrainの機能を紹介していきます。 ...

フォロー

follow us in feedly

blog-page_side_responsive

2019年8月
« 7月 9月 »
 123
45678910
11121314151617
18192021222324
25262728293031

アプリ情報

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