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的請求方法有很多種:

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

• 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 兩者差異是？

（感覺PUT和POST可能更容易搞混，但這個明天再說明。）

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

參考資料：

• 超文本傳輸協定 - 維基百科，自由的百科全書
• HTTP request methods - HTTP | MDN

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