學習筆記 | 什麼是網路請求（HTTP request）

Sincerely Media null on Unsplash

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

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

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

我們可以透過「從瀏覽器輸入網址」、「從 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 傳送給伺服器，告知它我要修改哪一筆資料的哪些內容

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

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

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

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

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

swagger api 文件來源：六角學院 Vue 課程 API 文件