こんにちは、主にReactでWEBサービスを作っています。
何気なく使っているREST-APIを使っての通信を簡単に行える、axiosを復習という意味合いでまとめました。
axiosとは？
- ブラウザからのXMLHttpRequestsを作成できる
- node.jsからhttpリクエストを作成できる
- promiseAPIをサポートしている
- リクエストとレスポンスを受け取り、データを変換できる
- リクエストをキャンセルしたり、カスタマイズできる
- jsonデータを自動変換してくれる
環境構築
インストール
npm install axios
yarn add axios
CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
読み込み
const axios = require('axios').default;
ES6のモジュールインポートなら
import axios from 'axios'
通常のリクエスト
###GET
APIのURLを指定
axios.get('http://localhost:3333/api/users')
POST
APIのURLと送りたい値を指定
axios.post('http://localhost:3333/api/users',{
name: 'test'
})
成功、失敗の切り分け
また、上記らはpromiseが使えるので、下記のようにレスポンスを元に、
成功、失敗でのコールバックも指定できる
axios.post('http://localhost:3333/api/users',{
name: 'test'
})
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
詳細に設定を渡してリクエスト
axios({
//URL ※必須
url: '/api/users'
//メゾット ※指定しないとデフォルトでget
method: 'get',
//ベースURL
//urlオプションが絶対パスでない場合、先頭につくURL
baseURL: 'http://localhost:3333',
//カスタムヘッダー
//受け取る側、送る値の形式に合わせて変更
headers: {
'Content-Type': 'application/json'
},
//パラメーター
//urlオプションでもつけれるがオプションとしても存在する
//下記で送ると http://localhost:3333/api/users?ID=999
params: {
ID: 999
},
//bodyとして送信する値
//PUT, POST, DELETE, 'PATCH'で適用可能
data: {
name: 'test'
},
//リクエストしてから中止するまでの時間
timeout: 2000,
//サーバーが応答するファイルを指定
//デフォルトがjson あんまり変えることはない
responseType: 'json',
//ステータスコードによって、Promiseでresolveかrejectを返すかを分岐できる
//trueでresolve、falseでrejectを返す
//下記はdefault
validateStatus: status => status >= 200 && status < 300,
//HTTPBasic認証を使う場合に記載
//今時つかうことはないと思う
auth: {
username: 'test',
password: 'testtest'
},
})
ほかにもあるのですが、使うかなというのはこれくらいかと思います。
ちなみに認証でBearer tokensを使いたい場合は下記として下さい
headers: { 'Authorization': `Bearer ${token}` },
レスポンス
axiosによってAPI通信して返ってくるのはオブジェクトです。
用途によって、そのオブジェクトの中身を取得することになります。
axios.get('http://localhost:3333/api/users')
.then(response => {
console.log(response)
})
//下記がresponseの中身
{
// サーバー側で明示的に指定したデータが入ってくる。
//こちらを使って、viewを更新したりする。
data: {
name: 'test',
id: 999
},
// HTTPリクエストした結果のステータスをコードで表す
//200 = success、404 = not found など
status: 200,
// HTTPリクエストした結果にまつわるメッセージ
statusText: 'OK',
// コンテンツタイプやキャッシュ制御などの各種の状態を示す情報が入れられている部分
headers: {},
// axiosで設定している値
config: {},
// リクエストとして送った情報
request: {}
}
オブジェクトなので、response.dateのようにとりだしてあげましょう
さらに応用部分はこちらにまとめてますのでよかったらみてください