axiosを使ってHTTP通信してみる。

axiosを使ってHTTP通信してみたのでその備忘録。

github.com

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);      // コンフィグ
  })