Old Sunset Days

Node.jsでSuperagentでAPIサーバーにアクセスする

日付 タグ node.js カテゴリ node.js

目次

Superagentを利用してAPIサーバーにアクセス

Node.jsでHTTPクライアントライブラリとしては以前利用したAxiosもあるが、Superagentも結構広く使われているライブラリである。

今回はこのSuperagentの使い方を見ていく。

SuperagentはAxiosのようにPromiseベースなHTTPクライアントなので、非同期処理が可能である。

https://visionmedia.github.io/superagent/ - Superagent

なお、今回作ったサンプルのソースコードは参照用としてGithubの以下に置いてある。 https://github.com/hugodeblog/node-superagent

JSON Serverのインストール

今回利用するSuperagentだが、HTTPクライアントとしての動作テストとして、何かしら公開されているWEBサービスのAPIやモック的なAPIサーバーが必要になる。そこにリクエストを投げて、返ってくるレスポンスを取得するサンプルを作るので。

そこで、Node.jsで簡単にAPIサーバーのモックを作れるJSON Serverを使ってみることにする。

JSON Serverは今後も良く使うことになりそうなので、グローバルにインストールしておく。

$ npm install -g json-server

モックとなるデータ例、例えば、ユーザー情報のようなものをjsonファイル形式で準備。

users.json
{
  "users": [
    { "id": 1, "name": "Hiroshi", "age": 25 },
    { "id": 2, "name": "Toru", "age": 32 },
    { "id": 3, "name": "Yoshiko", "age": 30}
  ]
}

モック用のデータが準備できたので、JSON Serverを起動して動作チェック。

$ json-server --watch users.json

  \{^_^}/ hi!

  Loading users.json
  Done

  Resources
  http://localhost:3000/users

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

3000番ポートで待ち受け状態になっているので、Superagentを利用したHTTPクライアントを作る前に手軽にcurlコマンドを使って、JSON Serverが正しく動いているか、ちょっとテストしてみる。

別のコンソール窓を開いて、

$ curl -X GET http://localhost:3000/users
[
  {
    "id": 1,
    "name": "Hiroshi",
    "age": 25
  },
  {
    "id": 2,
    "name": "Toru",
    "age": 32
  },
  {
    "id": 3,
    "name": "Yoshiko",
    "age": 30
  }
]

JSON ServerによるAPIモックサーバーからのレスポンスが返ってくる。 モックサーバーが立ち上がったので、あとはSuperagentを使ったHTTPクライアントのテストコードを書いて、テストをしていく。

Superagentを利用したサンプル

今回も作業ディレクトリの作成から始める。

$ mkdir node-superagent
$ cd node-superagent
$ npm init --yes
$ npm install --save superagent

この記事を書いた時点ではsuperagentは6.1.0であった。

そして、Superagentを利用したコードを用意。

httpclient.mjs
import {default as request} from 'superagent';
import * as util from 'util';
import * as url from 'url';
const URL = url.URL;

(async () => {

  // ユーザー一覧表示
  console.log('ユーザー一覧表示');
  try {
    var res = await request.get('http://localhost:3000/users')
    .timeout({response: 5*1000, deadline: 10*1000});
    console.log(res.body);
  } catch(err) {
    if(err.response && err.response.status && err.response.body)
      console.error(`stauts=>${err.response.status}, message=>${err.response.body}`);
    else
      console.error(err);
  }

  // 特定ユーザー抽出
  console.log('特定ユーザー抽出');
  try {
    var res = await request.get('http://localhost:3000/users/2')
    .timeout({response: 5*1000, deadline: 10*1000});
    console.log(res.body);
  } catch(err) {
    console.error(err);
  }

  // ユーザー情報アップデート
  console.log('ユーザー情報アップデート');
  try {
    var res = await request.put('http://localhost:3000/users/3')
    .timeout({response: 5*1000, deadline: 10*1000})
    .send({"id":3, "name":"Toru", "age":25})
    .set('Content-Type', 'application/json');
    console.log(res.body);
  } catch(err) {
    console.error(err);
  }

  // ユーザー追加
  console.log('ユーザー追加');
  try {
    var res = await request.post('http://localhost:3000/users')
    .timeout({response: 5*1000, deadline: 10*1000})
    .send({"id":4, "name":"Kaoru", "age":22})
    .set('Content-Type', 'application/json');
    console.log(res.body);
  } catch(err) {
    console.error(err);
  }

  // ユーザー削除
  console.log('ユーザー削除');
  try {
    var res = await request.delete('http://localhost:3000/users/1')
    .timeout({response: 5*1000, deadline: 10*1000})
    .send();
    console.log(res.body);
  } catch(err) {
    console.error(err);
  }

  // 再度ユーザー一覧表示
  console.log('再度ユーザー一覧表示');
  try {
    var res = await request.get('http://localhost:3000/users')
    .timeout({response: 5*1000, deadline: 10*1000});
    console.log(res.body);
  } catch(err) {
    console.error(err);
  }

})();

SuperagentはPromiseベースなので、async/awaitで通信処理待ちをしてAPIリクエストのレスポンス結果を表示している。

さて、JASON ServerにAPIリクエストを投げるところだが、JASON ServerはREST APIを提供してくれているので、APIリクエストのURIは以下となる。

メソッド  URL 役割
GET http://localhost:3000/users ユーザーの一覧取得
POST http://localhost:3000/users ユーザーを新規追加
GET http://localhost:3000/users/:id 特定のユーザー情報を取得
UPDATE http://localhost:3000/users/:id 特定のユーザー情報を更新
DELETE http://localhost:3000/users/:id 特定のユーザーを削除  

つまり、ユーザーの一覧取得は
request.get('http://localhost:3000/users')
である。

タイムアウト処理を指定しているが、
.timeout({response: 5*1000, deadline: 10*1000});

  • response:5*1000
    • サーバーから最初のバイトが返ってくるまで
    • 5*1000 = 5秒
  • deadline:10*1000
    • リダイレクト等含む全てのレスポンスの完了まで
    • 6*1000 = 10秒
var res = await request.post('http://localhost:3000/users')
.timeout({response: 5*1000, deadline: 10*1000})
.send({"id":4, "name":"Kaoru", "age":22})
.set('Content-Type', 'application/json');

ユーザー追加についてはPOSTでJSONデータのBodyを送信するので、上記のように追加したいユーザー情報をJSONにして送っている。

さて実際に実行してみる。

$ node httpclient.mjs
ユーザー一覧表示
[
  { id: 1, name: 'Hiroshi', age: 25 },
  { id: 2, name: 'Toru', age: 32 },
  { id: 3, name: 'Yoshiko', age: 30 }
]
特定ユーザー抽出
{ id: 2, name: 'Toru', age: 32 }
ユーザー情報アップデート
{ id: 3, name: 'Toru', age: 25 }
ユーザー追加
{ id: 4, name: 'Kaoru', age: 22 }
ユーザー削除
{}
再度ユーザー一覧表示
[
  { id: 2, name: 'Toru', age: 32 },
  { id: 3, name: 'Toru', age: 25 },
  { id: 4, name: 'Kaoru', age: 22 }
]

実行後は元のJSONファイルには変更が加えられ、以下の状態になる。

users.json
{
  "users": [
    {
      "id": 2,
      "name": "Toru",
      "age": 32
    },
    {
      "id": 3,
      "name": "Toru",
      "age": 25
    },
    {
      "id": 4,
      "name": "Kaoru",
      "age": 22
    }
  ]
}

以上がNode.jsでSuperagentを利用する方法の簡単な説明と、モックAPIサーバーとしてJASON Serverを使った例である。今後自分のプログラム開発でこれらを有効活用していくようにしていきたい。