axios學習筆記（一）：學習HTTP相關的技術知識點

**HTTP是一種能夠擷取如 HTML 這樣的網絡資源的 **protocol(通訊協定)。它是在 Web 上進行資料交換的基礎，是一種 client-server 協定，也就是說，請求通常是由像浏覽器這樣的接受方發起的。一個完整的Web文檔通常是由不同的子文檔拼接而成的，像是文本、布局描述、圖檔、視訊、腳本等等。

1. HTTP請求互動的基本過程

1. 前後應用從浏覽器端向伺服器發送HTTP請求（請求封包）
2. 背景伺服器接收到請求後，排程伺服器應用處理請求，向浏覽器傳回HTTP響應（響應封包）
3. 浏覽器端接收到響應，解析顯示響應體/調用監視回調

2. HTTP請求封包

1. 請求行：method url: GET/url, POST/url
2. 多個請求頭

Host: www.baidu.com

Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;

Content-Type: application/x-www-form-urlencoded 或者 application/json

1. 請求體

username=tom&pwd=123

{“username”: “tom”, “pwd”: 123}

3. HTTP響應封包

1. 響應狀态行: status statusText

2. 多個響應頭

   Content-Type: text/html;charset=utf-8

   Set-Cookie: BD_CK_SAM=1;path=/

3. 響應體

   html 文本/json 文本/js/css/圖檔…

4. post請求體參數格式

1. Content-Type:application/x-www.form-urlencoded;charset=utf-8

用于鍵值對參數，參數的鍵值用=連接配接，參數之間用&連接配接

例如: name=%E5%B0%8F%E6%98%8E&age=12

1. Content-Type:application/json;charset=utf-8

用于 json 字元串參數

例如: {“name”: “%E5%B0%8F%E6%98%8E”, “age”: 12}

1. Content-Type: multipart/form-data

用于檔案上傳請求

5. 常見的響應狀态碼

200 OK 請求成功。一般用于GET與POST請求

201 Created 已建立。成功請求并建立了新的資源

401 Unauthhorized 未授權/請求要求使用者的身份認證

404 Not Found 伺服器無法根據用戶端的請求找到資源

500 Internal Server Error 伺服器内部錯誤，無法完成請求

6. 不同類型的請求及作用

1. GET： 從伺服器端讀取資料
2. POST: 向伺服器端添加新資料
3. PUT: 更新伺服器端已經資料
4. DELETE: 删除伺服器端資料

7. API的分類

1. REST API: restful

   (1) 發送請求進行CRUD哪個操作由請求方式來決定

   (2) 同一個請求路徑可以進行多個操作

   (3) 請求方式會用到GET/POST/PUT/DELETE

2. 非 REST API: restless

   (1) 請求方式不決定請求的CRUD操作

   (2) 一個請求路徑隻對應一個操作

   (3) 一般隻有GET/POST

9. 使用 **json-server **搭建 REST API

9.1 json-server是什麼**?**

用來快速搭建 REST API 的工具包

9.2 如何使用json-server

1. 全局安裝json-server

npm install -g json-server

1. 目标根目錄下建立資料庫json檔案：db.json

{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
], "comments": [
{ "id": 1, "body": "some comment", "postId": 1 } ],
"profile": { "name": "typicode" } }      

1. 啟動伺服器執行指令

json-server --watch db.json

總結：