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

而请求方法可能包含这些特性:

• 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

-----正文结束-----