axiosを使ってHTTP通信してみる。
axiosを使ってHTTP通信してみたのでその備忘録。
axiosとは
axiosは、HTTP通信を簡単に行うことができるJavascriptライブラリです。 インストール自体はnpmさえ入っていれば簡単に行えます。
$ npm install axios
実際に使ってみる
axiosを使う場合は以下のようにimportもしくはrequireしてください。
// requireを使う場合 const axios = require('axios'); // importを使う場合 import axios from 'axios';
GET
GETを使う場合はこんな感じ。
axios.get('http://localhost:8080/hogehoge') // GETがうまくいった場合の動作を記述 .then(response => { console.log('status:', response.status); console.log('body:', response.data); }) // HTTP通信が失敗した場合の動作を記述 .catch(err => { console.log('err:', err); }) // 成功失敗に限らず行いたい動作を記述 .finally(() => { console.log('GET Operation is end.') })
HTTP通信にパラメタを渡したい場合は以下のようにする。
axios.get('http://localhost:8080/hogehoge') // パラメタとしてidとsortを付与してHTTP通信を実施 { id: 1, sort: 'id,desc' } .then(response => { console.log('status:', response.status); console.log('body:', response.data); }) .catch(err => { console.log('err:', err); }) .finally(() => { console.log('GET Operation is end.') })
POST
POSTの場合もGETと同じ感じでいける。
axios.get('http://localhost:8080/fugafuga') { id: 2, name: 'ponteru' } .then(response => { console.log('POST operation is successed'); }) .catch(err => { console.log('err:', err); }) .finally(() => { console.log('GET Operation is end.') })
タイムアウトの設定
パラメタにtimeoutを付与すればおk。
axios.get('http://localhost:8080/hogehoge') { id: 1, sort: 'id,desc', timeout: 10000 } .then(response => { console.log('status:', response.status); console.log('body:', response.data); }) .catch(err => { console.log('err:', err); }) .finally(() => { console.log('GET Operation is end.') })
カスタムヘッダの付与
timeoutと同様にheadersをパラメタに付与する。
axios.get('http://localhost:8080/hogehoge') { id: 1, sort: 'id,desc', headers: {'X-Requested-By': 'ponteru'} } .then(response => { console.log('status:', response.status); console.log('body:', response.data); }) .catch(err => { console.log('err:', err); }) .finally(() => { console.log('GET Operation is end.') })
ベーシック認証
この場合はパラメタにauthを付与すればいける。
axios.get('http://localhost:8080/hogehoge') { id: 1, sort: 'id,desc', auth: { username: 'ponteru', password: 'admin' } } .then(response => { console.log('status:', response.status); console.log('body:', response.data); }) .catch(err => { console.log('err:', err); }) .finally(() => { console.log('GET Operation is end.') })
レスポンスの構造
GETメソッドで帰ってくるレスポンスの構造は以下のような感じ。
// レスポンス構造. axios.get('http://localhost:8080/hogehoge') .then(response => { console.log(response.data); // レスポンスデータ console.log(response.status); // ステータスコード console.log(response.statusText); // ステータステキスト console.log(response.headers); // レスポンスヘッダ console.log(response.config); // コンフィグ })