LoginSignup
11
4

More than 3 years have passed since last update.

Postmanを使ってHTTPに送ったデータを確認する

Last updated at Posted at 2020-06-21

Postmonとは

HTTPのメソッドを通して行なったリクエストの結果を、簡単に確認できるようにするツール。

APIを構築する時、ブラウザからHTTPリクエストをサーバーに出すことになる。Postmanを使うと、HTTPのリクエストを確認し、REST APIが機能しているかを、簡単にチェックすることができる。

インストール方法

「Download Postman for Mac」https://www.postman.com/downloads/
上記のページよりダウンロードする。

アカウントを作成し、Sign inする必要がある(googleアカウントでもサインイン可能)

APIからのリクエストを確認する

テストのためのファイルを作成

<作成方法1>

・「+New」をクリックし、「Request」を作成

スクリーンショット 2020-06-21 10.14.42.png

・リクエストに名前をつける。HTTPの動作を確認する「Collections」を作成

スクリーンショット 2020-06-21 10.23.12.png

・request name: テストしたい、APIのHTTPリクエスト名
(例:GETをテストしたいのか、DELETEをテストしたいのか、など)
・create folder: テストのためのフォルダーを作成。Postman上の既存のフォルダーに付け加えることもできる
・「Save to APIアプリ名」で保存

<作成方法2>

・「+New collection」
・「Name」にコレクション名(テストしたいアプリ名)をつけて「Create」

スクリーンショット 2020-06-21 10.19.19.png

・「...」をクリックし「Add request」を選択

スクリーンショット 2020-06-21 10.20.24.png

・request name(テストしたいHTTPリクエストの名前)をつける。
・「save to コレクション名」をクリックし保存

スクリーンショット 2020-06-21 10.21.09.png

使ってみよう

①データをgetする

スクリーンショット 2020-06-21 10.29.59.png

・テストしたいAPIのURLを入力
・テストしたいHTTPメソッドを選択(今回はGET)
・「send」をクリック

「Body」にHTTPのレスポンスが表示される

②データをpostする

スクリーンショット 2020-06-21 10.28.46.png

・テストしたいAPIのURLを入力
・テストしたいHTTPメソッドを選択(今回はPOST)
・POSTしたいデータをPostman上から入力する

「Body」>「raw」>「JSON」を選択し、POSTしたいデータをJOSN形式で書き込む。

・「send」を押してデータをPOST

「Body」にHTTPのレスポンスが表示されるので、データがPOSTできているか確認する

<参考>今回のアプリで使用したコード

const express = require('express');
require('./db/mongoose')
const User = require('./models/user')
const Task = require('./models/task')

const app = express()

const port = process.env.PORT || 3000

//postしたデータを受け取る処理
app.use(express.json())

app.post('/users', (req, res)=> {
  const user = new User(req.body)
 //.save()でPromiseオブジェクトを作成し、インスタンスをデータベースに保存
  user.save().then(() => {
    res.send(user)
  }).catch((e) => { //.catchでエラー時の処理を分岐させる
    res.send(e)
  })
})

HTTPステータスを操作する

①返ってくるHTTPステータスの確認

スクリーンショット 2020-06-21 10.31.10.png

「Body」に表示されるHTTPのレスポンスの「status」を確認。
ここに表示されているのが、返ってくるHTTPステータス

②返ってくるHTTPステータスの変更

app.post('/users', (req, res)=> {
  const user = new User(req.body)
  //.save()でPromiseオブジェクトを作成し、インスタンスをデータベースに保存
  user.save().then(() => {
    res.status(201).send(user)
  }).catch((e) => {
    res.status(400).send(e)

  })
})

返ってくるHTTPステータスは「.status()」で設定できる。
Postmanでレスポンスを確認する際はstatus欄も確認する。

<参考>HTTPステータスの一覧と意味

HTTP Status Codes
https://httpstatuses.com/

11
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
4