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

更新於 發佈於 閱讀時間約 4 分鐘


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

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

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

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

URL Path Param & URL Query Param

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

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

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

raw-image

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

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

raw-image

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",
},
};

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

其他參考文章:

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

留言
avatar-img
留言分享你的想法!
avatar-img
Amber hh的沙龍
23會員
22內容數
Amber hh的沙龍的其他內容
2024/09/04
第三次月會來了!這個月的主題是「工程師的溝通秘訣」 很多人認為,當工程師只要跟電腦對話就好,在轉職之前我也這麼認為的,尤其是以前在服務業工作,從早到晚跟客戶對談、處理他們各種疑難雜症和情緒的過程,實在太容易讓我感到心累了,倒不如整天跟電腦對話,對錯很明顯,也不用顧及雙方情緒,肯定比處理客訴簡單
Thumbnail
2024/09/04
第三次月會來了!這個月的主題是「工程師的溝通秘訣」 很多人認為,當工程師只要跟電腦對話就好,在轉職之前我也這麼認為的,尤其是以前在服務業工作,從早到晚跟客戶對談、處理他們各種疑難雜症和情緒的過程,實在太容易讓我感到心累了,倒不如整天跟電腦對話,對錯很明顯,也不用顧及雙方情緒,肯定比處理客訴簡單
Thumbnail
2024/08/03
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
2024/08/03
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
2024/07/24
剛開始學前端都是跟著六角的課程進度走,雖然知道自己不會的技術很多,但至少有明確的學習目標,也會定期產出結果,當時的焦慮來源只覺得時間總是不夠,殊不知真正踏入實務工作後,除了焦慮時間不夠之外,甚至還有點迷失了方向。 轉職後的公司僅一人前端,我沒有 mentor 帶領,也找不到可以效仿學習的 Ro
Thumbnail
2024/07/24
剛開始學前端都是跟著六角的課程進度走,雖然知道自己不會的技術很多,但至少有明確的學習目標,也會定期產出結果,當時的焦慮來源只覺得時間總是不夠,殊不知真正踏入實務工作後,除了焦慮時間不夠之外,甚至還有點迷失了方向。 轉職後的公司僅一人前端,我沒有 mentor 帶領,也找不到可以效仿學習的 Ro
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
※ Params是什麼? 在網頁開發中,params代表的是參數(Parameters)。當你在路由(Route)中定義了一個或多個變數時,這些變數的值就會被存儲在 params 對象中。所以,params 就是用來存儲路由參數的地方,這些參數可以在處理請求時使用。 ※ Params的兩個功能:
Thumbnail
※ Params是什麼? 在網頁開發中,params代表的是參數(Parameters)。當你在路由(Route)中定義了一個或多個變數時,這些變數的值就會被存儲在 params 對象中。所以,params 就是用來存儲路由參數的地方,這些參數可以在處理請求時使用。 ※ Params的兩個功能:
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
Thumbnail
那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
Thumbnail
今天要來分享關於 Laravel Request 概念,Request 代表了來自客戶端(瀏覽器)的HTTP請求。這個類型的物件允許您輕鬆地訪問HTTP請求中的各種數據,例如表單數據、路由參數、Cookie、HTTP標頭等。 現在我們來定義及應用吧!
Thumbnail
今天要來分享關於 Laravel Request 概念,Request 代表了來自客戶端(瀏覽器)的HTTP請求。這個類型的物件允許您輕鬆地訪問HTTP請求中的各種數據,例如表單數據、路由參數、Cookie、HTTP標頭等。 現在我們來定義及應用吧!
Thumbnail
上篇記錄了關於 HTTP request 的筆記,這篇則是對於請求的回應紀錄~
Thumbnail
上篇記錄了關於 HTTP request 的筆記,這篇則是對於請求的回應紀錄~
Thumbnail
參數化查詢是一種將參數值傳遞給SQL語句的技術,這些參數值不會被直接解釋為SQL語法。這樣可以防止惡意用戶通過在輸入中插入惡意的SQL語法來攻擊資料庫。參數化查詢的一個主要優點是它能夠提高安全性,同時也能夠幫助資料庫優化查詢。
Thumbnail
參數化查詢是一種將參數值傳遞給SQL語句的技術,這些參數值不會被直接解釋為SQL語法。這樣可以防止惡意用戶通過在輸入中插入惡意的SQL語法來攻擊資料庫。參數化查詢的一個主要優點是它能夠提高安全性,同時也能夠幫助資料庫優化查詢。
Thumbnail
上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~
Thumbnail
上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News