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

3. 請求體

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

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

用於 json 字符串參數
例如: {“name”: “%E5%B0%8F%E6%98%8E”, “age”: 12}

3. 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

2. 目標根目錄下創建數據庫json文件：db.json

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

3. 啓動服務器執行命令

json-server --watch db.json

總結：

本篇文章主要分享了有關http相關的技術知識點，爲後期的學習axios打下基礎。