【DHC/JsonServer使い方】APIテストに便利!「JSONserver」をlocalに立ててAPIを返しローカルエディタや「DHC REST Client」でPOSTやGETリクエストする

2016年4月24日2020年5月23日

【API/DHC/使い方】APIテストに便利!「JSONserver」をlocalに立ててAPIを返しローカルエディタや「DHC REST Client」でPOSTやGETリクエストする

フロント側はリクエストできるのにサーバー側のAPI実装まだの場合、仮でリクエストしてレスポンスを得たいものです。
JSONサーバーとDHCという拡張機能を使って、その環境を整える説明です。
下のようなgif画像のようにAPIを仮で作るDHCの使い方の説明です。

【API/DHC/使い方】APIテストに便利!「JSONserver」をlocalに立ててAPIを返しローカルエディタや「DHC REST Client」でPOSTやGETリクエストする

gifアニメは

localエディタでjsonを更新。 → json-serverを立ててapiをGET → DHC REST ClientでGET → あらたなオブジェクトをDHCでPOST → ブラウザを更新して増えていることを確認。 → 画面ちっさ。みずら。です。

全部ローカルでできるので便利ですね。gulpで別のサーバーを立ててwebサーバーも立てておけば2つのサーバー間で状態の更新や取得ができそうです。(ちょっとやってみよ)

json-server

サーバー側の用意が整っていなくてもフロントで先行してテスト開発できるようになる

(starの数すごい)

$ npm install -g json-server

プロジェクト直下にdb.jsonを作成

適当に。これをコピペ。

んで $ json-server --watch db.json (-は2つです。見えづらいけど)

【API/DHC/使い方】APIテストに便利!「JSONserver」をlocalに立ててAPIを返しローカルエディタや「DHC REST Client」でPOSTやGETリクエストする

サーバーが起動します。

この時なんか下のようにエラー出てたら

【json-server-watch db.json】エラー「events.js:154 throw er; // Unhandled 'error' event ^Error: listen EADDRINUSE 0.0.0.0:3000」

無事なにもなく立ち上がったら。

そこのresourceのところをコピーしてDHCに貼り付けてGETなりすればOKです。
そのやり方は下で説明。

GET /posts
GET /posts/1
POST /posts
PUT /posts/1
PATCH /posts/1
DELETE /posts/1

GETやPOSTでリクエストできます。 POSTしたりdb.jsonを編集してGETしたりしてみてください。

あともう一つ「DHC REST Client」というのがあります

]3 DHC REST Client

ここに先程のjsonserverで立てたローカルhttps://3000/users/などをあてて、 POSTやGET,DETELEなどできます。

このjson.serverとDHCがローカルで簡単にテストできるのは最強。便利ですね。