D36_W4-Request 額外補充（超重要）& HW1 檢討

MTR05 Request 額外補充（超重要）

00'00" - 11'47"
- W4 網路概論
- 傳紙條故事
- 會碰到 HTTP 這個通訊協定，很像是規定紙條上要寫什麼東西
- 以 HTTP 這個協定來說，紙條裡面有分 header 跟 body
- header 裡面有幾種 method: get, put, post...
- 在網址上就可以看出，想要拿的資料
- header 放什麼，端看使用的 HTTP method 方法，在 header 裡面也可以讓你放額外資訊
11'48" - 15'09"
- 同學提問：在網址上加一些東西，就可以拿到資料嗎？
  - 這是兩種不同的概念，以下為區別：
  - 透過 Node.js 提供的 process.argv 拿到參數；例如在 terminal 執行 node 123.js read
  - 在 base URL 的網址後面加上 path，就像是不同的網址來區分不同的資料
  - 例如：https://lidemy-book-store.herokuapp.com/ ＋ books -> https://lidemy-book-store.herokuapp.com/books
    後面的 books 就是 path
我的理解：網址就像一個倉庫，path 感覺像是倉庫裡面的房間，有不一樣的編號，裡面有存放不一樣的東西
15'12" - 23'20"
- 同學提問：第五週 HTTP challenge 的作業，是在網址後面加一些東西就好，那這個東西跟剛剛的問題是一樣的嗎？
  - 要帶資訊的話，通常是用 post 這個方法
  - 第二種方式為「在網址後面加東西」，就像是下面的 lv1?key=value，叫做 query string。
  - lidemy-http-challenge.herokuapp.com/lv1?key=value
  - 用 get 拿資料的時候，需要帶一些額外的資訊，但放在 header 上面很麻煩，因此演變而來。
23'31" - 28'26
- header 有兩種，req 的跟 res 的。
- 目的決定手段，要用什麼樣的 header 來自於想做什麼事
- 26'40" 作業四：用 node.js 發 req 跟在瀏覽器上發 req 是兩件事，第八週會提到
28'35" - 38'34"
- 根據 req 的內容，決定要不要放 header
- 看 API 文件決定怎麼放，也有可能可以放在網址後面（query string）
39'03" - 49'50"
- 補充：用 post 時，要如何知道 body 裡面放的資料格式？例如怎麼知道要寫哪一種格式？例如 name = 123 or name: 123?
  - 可以看 request 這個套件的文件 forms 說明，有一個 request 的 header 叫做 content-type
  - request supports application/x-www-form-urlencoded and multipart/form-data form uploads. For multipart/related refer to the multipart API.
  - 'content-type': 'application/x-www-form-urlencoded'，一種表單資料格式
  - 以上面的形式帶資料的話，body 就會長得像這樣
    
    body: 'name=123&age=456'
  - 所以當我們在寫下面這段程式碼的時候，request 這個 library 就會自動把 content-type 這個 header 的 body 格式轉成表單格式的資料送出
```
// 下面是我們寫的程式碼
request.post('http://service.com/upload', {
form:{
  name: '123',
  age: 456
}
})

'content-type': 'application/x-www-form-urlencoded'
body: 'name=123&age=456' // req 這個 library 就會把上面的物件轉成字串放在 body 裡面
```
49'53" - 最後：

有時候資訊內容會造成 server 的混淆，因此 content-type 的關鍵字 ‘urlencoded’，是一種同等的編碼形式（encode）

在 js 裡面內建的函式是 encodeURIComponent('a&b=1')，會產出
a%26b%3D1 = a&b=1
& -> %26
= -> %3D

request.post('http://service.com/upload', {
          form:{
            name: '123',
            age: 456,
            str: 'a&b=1'
          }
        })

body: 'name=123&age=456&str=a&b=1'
// 有可能解讀為 str = a, b = 1

req 跟 res 的 header 內容有可能是不太一樣的，例如 method 的 header 只有 req 會有

HW1 檢討

我們用的是 request 這個 library，API 文件：https://github.com/request/request

可以複製模板：

const request = require('request');
request('http://www.google.com', function (error, response, body) {
  console.error('error:', error); // Print the error if one occurred
  console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
  console.log('body:', body); // Print the HTML for the Google homepage.
});

const request = require('request');

request('https://lidemy-book-store.herokuapp.com/books?_limit=10', 
function (error, response, body) {
  if (error) {
    console.log('error:', error)
    return 
  }

  let obj 
  try {
    obj = JSON.parse(body)
  } catch(error) {
    console.log(error)
    return
  }

  for (let i = 0; i < obj.length; i++) {
    let result = ' '
    result += obj[i].id + ' ' + obj[i].name
    console.log(result)
    // 可以寫成 console.log(`${obj[i].id} ${obj[i].name}`)
    // 這個叫做 ${} Template literals
  }
});