vocus logo

方格子 vocus

學習筆記 | 什麼是網路請求(HTTP request)

更新 發佈閱讀 2 分鐘

上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~

前端開發什麼時候需要網路請求?

一般常見的獲取數據、提交表單、登入驗證、串接第三方服務等等,這些都是需要透過伺服器向資料庫去提取資源的行為,就需要透過網路請求來完成。

我們可以透過「從瀏覽器輸入網址」、「從 javaScript 發送請求」、以及「使用postman」等多種方式來發送請求

發送網路請求時,需要向伺服器說明「我是誰」,「我要幹嘛」,「我要什麼資料」,經過伺服器確認並從資料庫取回相應的資料回傳


Request header 告訴伺服器「我是誰」

發送請求一定要告訴伺服器「我是誰」,因此會將「我是誰」的相關訊息,帶在Request header 資料內,header 內會包含(僅列出自己常用的,並非全部):

  • Accept:請求者可以接受什麼類型的資料回傳,伺服器根據這個資訊進行回應
  • Authorization:用來告知伺服器請求者的身分認證,通常會帶上經驗證的令牌(token)
  • Content-Type:請求者要請求的資料格式,JSON、圖片、表單...


Request method 告訴伺服器「我要執行什麼請求」

請求可以是獲取資源,也可以是提交表單,那麼根據請求目的不同,所使用的請求方法也會不同:

  • get:獲取資源(單純獲取資源,故不會帶上request body)
  • post:提交指定的資源
  • delete:刪除指定的資源
  • put/patch:變更指定的資源內容

基本上就根據 api 文件上敘述的請求方式發送請求即可~

除了 get 之外,post、delete、put 這幾個方法,會對資源內容進行變更、修改,因此需將指定的資源內容透過 request body 傳送給伺服器,告知它我要修改哪一筆資料的哪些內容

raw-image


Request body 告訴伺服器「我要給你什麼資料」

body 的內容就根據 api 文件,提交相對應的資料給伺服器就可以囉,以下方 swagger 的 API 文件為範例,data 所列出的區塊就是發送post 請求時,一定要帶上的 body 資料

如果我們要打這支 api 實作「加入購物車」功能,就需要提供 product_id 及 qty 給伺服器

raw-image

這篇就先記錄發送請求,下一篇來記錄回傳,也就是 response 的部分吧~


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

swagger api 文件來源:六角學院 Vue 課程 API 文件
留言
avatar-img
Amber hh的沙龍
24會員
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
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
API(Application Programming Interface,應用程式介面)可以視為不同軟體系統之間的溝通橋梁,讓雙邊可以交換數據並執行各種功能。這篇會記錄產品經理一定要知道的幾個 API 概念,像是常見的錯誤代碼以及不同的 HTTP 方法(如 PUT、GET、POST)和實際案例說明
Thumbnail
API(Application Programming Interface,應用程式介面)可以視為不同軟體系統之間的溝通橋梁,讓雙邊可以交換數據並執行各種功能。這篇會記錄產品經理一定要知道的幾個 API 概念,像是常見的錯誤代碼以及不同的 HTTP 方法(如 PUT、GET、POST)和實際案例說明
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
在這一課中,我們將學習如何在Python中使用requests模塊發送HTTP請求。 發送GET請求requests.get() 函數用於發送GET請求。
Thumbnail
在這一課中,我們將學習如何在Python中使用requests模塊發送HTTP請求。 發送GET請求requests.get() 函數用於發送GET請求。
Thumbnail
這篇想來寫,剛碰到js得時候,為了讓程式可以運作而安裝Node.js 。Node.js 是能夠在伺服器上面運行 JavaScript 的應用平台環境,透過 Node.js 提供的函式庫與執行環境能完成伺服器端服務。此篇幅就直接從純後端的角度切入摟(對不起拉我寫來寫去還是不知道怎麼順順的寫好文章開頭Q
Thumbnail
這篇想來寫,剛碰到js得時候,為了讓程式可以運作而安裝Node.js 。Node.js 是能夠在伺服器上面運行 JavaScript 的應用平台環境,透過 Node.js 提供的函式庫與執行環境能完成伺服器端服務。此篇幅就直接從純後端的角度切入摟(對不起拉我寫來寫去還是不知道怎麼順順的寫好文章開頭Q
Thumbnail
上篇記錄了關於 HTTP request 的筆記,這篇則是對於請求的回應紀錄~
Thumbnail
上篇記錄了關於 HTTP request 的筆記,這篇則是對於請求的回應紀錄~
Thumbnail
上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~
Thumbnail
上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News