學習筆記 | 網路請求帶參數的方式

John Schnobrich on Unsplash

前篇筆記【什麼是網路請求】時有說到，發送網路請求時，需要向伺服器說明「我是誰」，「我要幹嘛」，「我要什麼資料」，經過伺服器確認後，才從資料庫取回相應的資料回傳

那麼「我要什麼資料」就需要告訴伺服器特定的內容啦，舉例來說：

1. 我要登入，就必須把「帳號」和「密碼」一起帶在請求內，發送給後端進行驗證
2. 我想在人事資料表內，篩選出性別是女生的資料，就需要加入「性別是女生」這樣特定的參數

發送請求時，帶入參數的方式也不少，這篇會記錄自己最常使用的三種方式，分別是 URL Path Param、URL Query Param 和 Request Body

URL Path Param & URL Query Param

URL Path Param 和 URL Query Param 顧名思義就是帶在 URL 上的參數，但兩者在寫法和定義上是有區別的：

• Path Param 是路徑參數，它會在 URL 上去指定某一筆「特定的資源」
• Query Param 則是查詢參數、查詢字串，會在 URL 上加入「查詢的條件」

用表格來看會比較清楚一點：

也就是說，Path Param 必須是訪問的「資源」之一，而Query Param並不是資源，只是從訪問到的資料中，篩選出與該參數有關的資料

資源指的是具有唯一性、指向性的參數，像 id 就是具有「識別」特定資料、且是「唯一性」的參數，就能透過 Path Param 帶到 URL 裡，並且訪問到特定的資源

Path Param的實作，可以用上圖為範例，摩天輪票券是旅遊網站內，眾多產品裡的其中一個品項

• URL 網址 https://iamamberhh.github.io/HH-STAY/#/product/-NPAPuE2reSHxhtVnUlZ
• 在 product 後方的就是產品 ID -NPAPuE2reSHxhtVnUlZ，摩天輪票券就相當於 product 這筆龐大資料內的其中一筆「資源」

因此我們可以將 ID 帶到 URL 內，再去呼叫 API ，以取得摩天輪票券的產品內容

Query Param 的部分，我用 Random User 來實作

• api 路徑 https://randomuser.me/api/?gender=female&nat=us
• 後方的 ?gender=female&nat=us就是 Query Param ，性別(gender)和國籍(nat) 屬於查詢的「條件」

因此我們可以將這些條件加到 URL 內，進行資料範圍限縮，只取得女性和美國籍的 user 資料

特別要留意的是，請求方法中 get 並沒有 request body，因此要帶參數的話，就只能帶在 URL 內！

其他的請求方法通常會使用 request body 的方式，將密碼(不適合用 URL 傳遞)、token 等重要資訊打包，夾帶在 body 封包裡傳送給伺服器

Request body

Request body 就根據 api 要求，整理好需要的資料格式送出去就可以囉～

const signUpData = {
  email: "test@mail.com",
  password: "xxxxxxxx",
  nickname: "Amberhh"
};

axios.post("api 路徑", signUpData);

小備註一下，目前公司的後端同事會請我在patch/put 請求時，把 Request body 拆分成 data 和 desire，去區分必填和非必填的欄位，資料格式會像是這樣：

const signUpData = {
  data: {
    email: "test@mail.com",
    password: "xxxxxxxx",
  },
  desire: {
    nickname: "Amberhh",
  },
};

不確定其他工程師都怎麼實作必填和非必填的欄位，歡迎跟我分享！

其他參考文章：

• http post參數傳遞的兩種方式
• Path Param & Body Param & Query Param

我是Amber，前端學習中，歡迎交流討論🧸