Hoppscotch 是什麼？新手第一次打 API 的超入門教學

學到 HTTP、JWT、Refresh Token 之後，你會一直看到一件事

POST /login
GET /auth/me
Authorization: Bearer token

但對新手來說，最困難的其實不是理解名詞，而是我要去哪裡打 API？ Header、Body 到底要填在哪？怎麼知道 request 成功還是失敗？

我們來認識一個很適合新手的工具：

Hoppscotch

https://hoppscotch.io/

它可以讓你不用寫前端、不用寫後端，只要在瀏覽器上填資料，就能直接送出 API request。

打 API 前先認識三個區塊

新手第一次打開 Hoppscotch，可能會覺得畫面很多。

但先只看三個地方就好。

1. Method

Method 是這次 request 的動作。

GET     取得資料
POST    新增資料/登入
PUT     更新整筆資料
PATCH   更新部分資料
DELETE  刪除資料

如果是登入，通常會用：

POST

因為你要把帳號密碼送給 server。

2. URL

URL 是你要打的 API 位置。

https://dummyjson.com/auth/login

這代表你要送 request 到 DummyJSON 的 API。

3. Body

Body 是你要送給 server 的資料。

例如登入時要送：

{
  "username": "emilys",
  "password": "emilyspass"
}

server 收到後，才知道你要用哪個帳號登入。

用 Hoppscotch 完成第一次登入 API

這次我們會真的打一支 API，拿到 token。

Step 1：打開 Hoppscotch

打開：

https://hoppscotch.io/

Step 2：設定 Method

在左上方找到 Method 下拉選單。

把它改成：

POST

Step 3：輸入 API URL

在 URL 欄位貼上：

https://dummyjson.com/auth/login

這代表我們要呼叫登入 API。

Step 4：填入 Body

找到 Body 區塊。

選擇：

JSON

然後貼上：

{
  "username": "emilys",
  "password": "emilyspass"
}

這一段代表，我們把帳號密碼送給 server。

Step 5：按 Send

按下：

Send

如果成功，你會在下方看到 Response。

裡面會有：

{
  "accessToken": "xxx.yyy.zzz",
  "refreshToken": "aaa.bbb.ccc",
  "id": 1,
  "username": "emilys"
}

這代表登入成功。

Response 要怎麼看？

Response 是 server 回你的結果。

你可以先看兩個地方：

Status Code

200 成功
201 建立成功
400 你送的資料有問題
401 未登入 / token 錯誤
404 找不到 API
500 server 壞掉

如果看到：

200 OK

代表這次 request 成功。

Response Body

這是 server 回傳的資料。

{
  "accessToken": "...",
  "refreshToken": "..."
}

這代表 server 不只是說成功，還給你後續要用的 token。

用 token 打需要登入的 API

剛剛我們拿到 accessToken。

接著用它打一支需要登入的 API。

Step 1：新增一個 request

Method 選：

GET

URL 輸入：

https://dummyjson.com/auth/me

這支 API 的意思是，查詢目前登入者是誰。

Step 2：加入 Header

找到 Headers 區塊。

新增一筆：

Key: Authorization
Value: Bearer 你的 accessToken

注意，中間有一個空格：

Bearer token

不是：

Bearertoken

Step 3：按 Send

如果成功，會看到類似：

{
  "id": 1,
  "username": "emilys",
  "email": "emily.johnson@x.dummyjson.com"
}

這代表 server 透過 token 認出你是誰。

新手最常犯的錯

1. Method 選錯

登入要用：

POST

如果你用 GET，通常會失敗。

2. Body 沒選 JSON

如果你只是貼文字，但沒有選 JSON，server 可能看不懂。

3. Header 拼錯

一定是：

Authorization

不是：

Authorisation

也不是：

Auth

4. Bearer 後面忘記空格

正確：

Bearer xxx.yyy.zzz

錯誤：

Bearerxxx.yyy.zzz

重點整理

• Hoppscotch 是用來測 API 的工具
• Method 代表 request 動作
• URL 是 API 位置
• Body 是送給 server 的資料
• Header 可以放額外資訊，例如 token
• Response 可以看成功或失敗
• Status Code 是 debug API 的第一步