iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
自我挑戰組

登堂入室!前端工程師的觀念技術 _30_ 題系列 第 16

15. HTTP request methods ( 上 )--- GET vs. POST

HTTP


定義

網路通訊之間必須有共同的標準,而為了界定這些標準,於是產生協定(Protocol)。(可以想成寄信或寄包裹時,填寫資料都會有固定格式,如果不遵守格式或遺漏資料,郵差就沒辦法送信。)

HTTP是位於應用層的協定,網路瀏覽器能藉由HTTP交換資訊,提供使用者瀏覽網頁的服務。

超文本傳輸協定 (HyperText Transfer Protocol, HTTP) 是一種用來傳輸超媒體文件 (像是HTML文件) 的應用層協定,被設計來讓瀏覽器和伺服器進行溝通,......
引用自 HTTP | MDN

網路模型層級的資訊,可以查查「OSI七層」或「TCP/IP協定」或參考:什麼是OSI的7層架構?和常聽到的Layer 7有關?

HTTP request methods


在交換資訊時有許多情況,有可能只是想知道某個條目的資訊,或是想要刪改資料的內容。

在網頁的範疇,HTTP定義了Request Methods(也稱作HTTP verbs.),用以指示請求的操作內容。

HTTP的請求方法有很多種:

method 說明
GET GET 方法請求展示指定資源。使用 GET 的請求只應用於取得資料。
HEAD HEAD 方法請求與 GET 方法相同的回應,但它沒有回應主體(response body)。
POST POST 方法用於提交指定資源的實體,通常會改變伺服器的狀態或副作用(side effect)。
PUT PUT 方法會取代指定資源所酬載請求(request payload)的所有表現。
DELETE DELETE 方法會刪除指定資源.
CONNECT CONNECT 方法會和指定資源標明的伺服器之間,建立隧道(tunnel)。
OPTIONS OPTIONS 方法描述指定資源的溝通方法(communication option)。
TRACE TRACE 方法會與指定資源標明的伺服器之間,執行迴路返回測試(loop-back test)。
PATCH PATCH 方法套用指定資源的部份修改。

而請求方法可能包含這些特性:

  • safe(安全) : 是否會更動到server的狀態/ 更動資料。
  • idempotent(冪等) : 是否會因為重複調用請求,而影響資料。
  • cacheable(可緩存的) : 意旨請求會被暫時儲存,以供之後檢索或使用。

今天的文章要來談到 GET 和 POST:

GET

GET請求只在取得資料時使用。

fetch()預設的方法就是"GET",因此我們會直接獲得想要的資料。

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => { console.log(json) ;})

fetch()除了第一個必須設置的參數是URL外,還能加入第二個參數init,作為整個request的設置。

所以上面的請求也可以改寫成:

fetch('https://jsonplaceholder.typicode.com/todos/1',   {
  method: 'GET',   // 指定請求方法
  headers: {    // 標頭
    'Content-type': 'application/json; charset=UTF-8',    // 檔案類型
  },})
  .then(response => response.json())
  .then(json => { console.log(json) ;})

會執行一模一樣的輸出。

// output
{
	"userId": 1,
	"id": 1,
	"title": "delectus aut autem",
	"completed": false
}

GET的性質

  • safe(安全) : 不會更動資料的內容,因此是安全的方法。(O)
  • idempotent(冪等) : 並且即使請求多次,server都會回傳相同的結果,所以也是冪等的。(O)
  • cacheable(可緩存的) : 會被暫時儲存,以供之後檢索或使用。(O)

POST

POST是在實際應用上很廣泛的請求方法,可以用作新增資料、提交訂單...等等。

如果有即將POST的資料,資料類型定義在headers裡的Content-Type。

我們可以試著在範例裡加入資料:

fetch('https://jsonplaceholder.typicode.com/todos',   {  
  method: 'POST',
  body: JSON.stringify({
    title: 'Winnie the Pooh',
    id: 201,
    userId: 1,
    completed: true,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },})
  .then(response => response.json())
  .then(json => { console.log(json) ;})

POST成功的資料會像這樣 :

{
    'title': 'Winnie the Pooh',
    'id': 201,
    'userId': 1,
    'completed': true,
  }

注意: JSONPlaceholder只是一個模擬器,不會真的更動資料。

POST的性質

  • safe(安全) : 會更動資料的內容,因此是不安全的。(X)
  • idempotent(冪等) : 請求多次就會執行多次要求,所以不是冪等的。(X) e.g. 發送多次相同的訂單。
  • cacheable(可緩存的) : 如果headers裡的Content-Location有指定,是可以被暫時儲存。但一般不會這麼做,而且這在Firefox不支援。(△)

GET vs. POST


GET & POST 兩者差異是?

GET POST
用途 獲得資料 新增資料
安全性 O(唯讀) X
冪等 O X
可緩存的 O

(感覺PUT和POST可能更容易搞混,但這個明天再說明。)

【如內文有誤還請不吝指教>< 謝謝閱覽至此的各位:D】

參考資料:

-----正文結束-----


上一篇
14. 解釋 Event bubbling & Event delegation
下一篇
16. HTTP request methods ( 下 )--- PUT vs. PATCH
系列文
登堂入室!前端工程師的觀念技術 _30_ 題31

尚未有邦友留言

立即登入留言