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


関連記事

Go言語

GoフレームワークGinでミドルウェアを使ってログインAPIを実装

1 はじめに2 ログインAPIの作成3 ログインのセッション管理4 ミドルウェア4.1 gin.Default()4.2 Logger4.3 Recovery4.4 sessions5 独自ミドルウェ ...

icon

ドキュメント作成の技術「テクニカルライティング」とは

1 はじめに2 テクニカルライティングとは3 少しでも分かりやすく、簡潔にする3.1 一文一義3.2 長くしすぎない、繋げすぎない3.3 長さの目安は?4 伝わりやすく書く4.1 まず主題を書く4.2 ...

ReactNative画面遷移

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

UserNotificationsの使い方について

1 はじめに2 UserNotificationsフレームワーク3 基本実装3.1 デリゲートの設定3.2 ユーザー許可3.3 デバイストークン取得後3.4 バックグラウンドで通知受信3.5 フォアグ ...

入門スクラム〜スクラムフレームワーク

1 はじめに2 スクラムの特徴2.1 シンプルなフレームワークであること2.2 素早い反復を繰り返すこと2.3 検査・適応・透明性3 スクラムの役割3.1 プロダクトオーナー3.2 スクラムマスター3 ...

フォロー

follow us in feedly

blog-page_side_responsive

東京改造計画(NewsPicks Book)
2019年8月
 123
45678910
11121314151617
18192021222324
25262728293031

アプリ情報

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