[NET101] 網路基礎概論 -- 學習日記

新手問題集錦

Q1: 要抓取 API 文件內的資料，需要用到 HTTP method 來達成，其中request(url, function(error, response, body) => {...}) 中的是什麼意思呢？

在解釋 response body 前，要先回顧一下網頁是怎麼打開的，還記得先前在 week 1 有提到過怎麼在瀏覽器打開網頁的過程嗎？在 Google 首頁搜尋框打上：JavaScript，並且按下 Enter後，會跟瀏覽器說送出 JavaScript 的 request，瀏覽器跟作業系統說送出 reqeust，作業系統跟網路說要送出 request 給 google 的 server，把資料送到 dataBase，google server 回傳 response 給網路，網路再把 response 交還給作業系統，之後作業系統把 response 給 chrome 瀏覽器，最後 google chrome 在顯示出結果。

其實在這個HTTP message 中分為「發送 request」 及 「接收 response」，裡面有規範固定的格式，讓大家可以依照 HTTP 規則傳達網路訊息，HTTP message 內的組成為 starter-line、HTTP headers、empty line、body。
1.starter-line：描述要用什麼方法實現 request，如POST、GET、PATCH等，及 status code（如：200 OK）。

syntax: request method, request target, HTTP version
example: POST /?id=1 HTTP/1.1 
HTTP/1.1 200 OK

2. HTTP headers：附加的重要資訊，如訂便當服務，要不要辣，何時外送抵達，要不要免洗餐具。在實際網路應用上，有標示哪一款瀏覽器（Chrome、IE、FireFox）、內容形式為 json、html等。在 request 中會出現幾類的 headers，有 general headers（如：via）、request headers（如：User-Agent 或 Accept）、formerly entity headers（如：content-length），舉例的 headers 先有個印象即可。

1. empty line：嚴謹的換行標準，表示 header 的結束。
2. body：又稱為 message body（訊息主體），就像是封包內訊息承載資料的地方。
   

現在瞭解 HTTP request 和 response 會傳送什麼樣的資料後，就可以來研究一下request(url, function(error, response, body) => {...})。
舉一個餐廳點餐的例子：
用餐的客人向餐廳內的服務員點餐（發出 request）：我要跟廚師點一客七分熟的腓力牛排，附蘑菇醬汁，然後服務員會回覆（response）：成功點餐或此品項已售罄。

<客人的 request>
header:
  牛排熟度：七分熟
  醬汁：蘑菇醬
body:
  腓力牛排

<服務員的 response>
200 OK 
---------
成功點餐

<服務員的 response>
400 error 
---------
此品項已賣光

一般人在點餐時，發出請求（request）會希望得到的回覆是有沒有錯誤（error）、答覆（response）、確切內容（body），就如請求 API 文件內的資料時一樣，輸入參數（parameter）在向 API 文件請求資料的時候，也會希望可以獲得 API 文件裡面的資料（body）、回覆（response）或者出錯時的 error 的資訊。
因為 request 只是一個動作的要求，具體要求什麼東西，做什麼事，需要另外寫清楚，例如：要求進去這個網頁，需要進去什麼網頁（目的地），進去網頁後要做什麼？以串接API文件為例子的話，就是發出 request 要使用這個 API 文件內的資訊，目的地就是該 API 文件的 URL，要做什麼的話，就是利用 function 包住要做的事情（將API文件內的資訊抓出來）。
透過串接 API 文件裡的資訊來實際演練 HTTP request 和 response，利用 Node.js 及 npm modules 的 request 循序漸進的練習。

1. 初步從書單中新增單一書籍/列出所有書籍/查詢單一書籍/刪除書籍/更新書名
2. 什麼是 query、EndPoint、URL-Encoding？
3. 依據不同 API 文件的需要，在 headers 加上 client-id、accept、HTTP basic authorization，以下為練習的例子：
   (1) 利用 request.post 新增資料時，在 headers 裡加入content-type，讓新增的資料符合格式。
   (2) API 提供一個介面讓大家去交換資料，但有些人不想要讓 API 文件公於大眾，只希望有權限的人觀看或者修改比較好，那要怎麼在 request 中，代入權限並進入這個 API 文件呢？這裡利用簡單的 HTTP 基本認證 搭配學習。
   (3) 有時候瀏覽器不一樣，有的是從電腦瀏覽網頁，有的是從手機瀏覽網頁，根據螢幕比例不一樣，若只有一種網頁格式，會降低使用者的瀏覽體驗，所以在 headers 加入瀏覽器的判別，讓 server 發出 response 給 client 時，可以根據不同的瀏覽器做網頁格式的因應，這時候就需要在 headers 加上 user-agent 來辨別瀏覽器。

Q3: API 是什麼? RESTful API 又是什麼?

API 是什麼?
常常可以在 App Store 或者 Google Play 上看見氣象跟星象有關的 app，或者是在網誌上看食記的時候，會看到文章內鑲嵌 Google Map 地圖，網誌跟 app 的資訊都是來自 Google Map 跟氣象局的資料。在 Google Map 和氣象局的角度，就是提供資料，而在 app 和食記的角度，就是在使用資料，這樣一來一往就是交換資料，但是一般人不會想把自己的資料直接分享給別人使用，可能會有一些隱私顧慮，所以利用另一種形式將提供資料給大眾使用，這樣有利於大眾做一些新功能的開發，例如：使用他方的星象跟氣象資料，製作的新 app，或者是幫助食記圖像化餐廳位置的 Google Map。那這些資料種類繁多、資料龐大，怎麼樣讓大家可以擷取使用？就需要訂立一個統一化的格式、規範跟環境，讓大家不僅可以分享資料，也可以使用這些資料。 這些資料的提供跟使用，就是使用 API 這個方法，API 全名是應用程式介面（application programming interface），重點是「介面」這個詞，先前提到，若要讓大家都看的懂資料，就要有統一的格式跟環境，這個 API 就是中間的媒介，讓大家可以擷取跟提供資料，有了資料的統一格式跟資料說明，再搭配程式語言的輔助，讓大家可以成功的將資料交換，讓更多人可以使用資料跟開發新功能。

RESTful API
RESTful API 是基於設計風格所創造，對 data 的動作如：新增、修改、刪除、取得，剛剛好對應到 HTTP method 的 GET、POST、DELETE、GET。如果是 HTTP method 的話，要先瞭解每個指令的意義跟使用方式，而 RESTful API 將這些指令對應成白話的動作：新增、刪除、取得。

Q4: try{...} catch() {...} throw 要怎麼使用？為什麼需要？

有時候再執行 js 時，不知道哪裡出了錯，可以使用 try catch ，抓到某個錯誤時，會 console.log（）出的資訊，來看哪裡發生。其實也可以用在預期錯誤，在執行發生錯誤時，提供錯誤修正的提示。
throw 是直接丟出訊息，可以這樣使用 throw 'Opps!!!'，只要執行這一行，就會出現 'Opps!!!'。

參考：

HTTP/1.1 — 訊息格式 (Message Format)
npm modules -- request
HTTP headers