前後端資料互動(一)——網路請求詳解

前後端分離之後，網路請求是前端的必備技能。網路請求中瀏覽器工作流程，你瞭解多少？

一、什麼是HTTP協議？

HTTP協議是Hyper Text Transfer Protocol（超文字傳輸協議）的縮寫，是一種通訊協議，主要用於從伺服器傳輸超文字到客戶端的傳送協議。

我們在瀏覽器中輸入網址（URL），然後瀏覽器給伺服器傳送一個請求，伺服器收到我們的請求之後進行處理後，生成響應，攜帶瀏覽器需要的html、css、js等超文字資訊，通過HTTP協議返回給瀏覽器，瀏覽器再通過解析返回的html、css、js等檔案，這樣我們就可以看的一個完美的網頁了。請求過程如圖所示：

 

二、URL介紹

URL是Uniform Resource Locator的縮寫，URL地址是統一資源定位符，是網際網路上用來標識某一處資源的地址。

基本格式如下：

schema://host[:port#]/path/.../[;url-params][?query-string][#anchor]

一個完整的URL包括以下幾部分：

1. 協議部分(schema)：指定底層使用的協議，在Internet中可使用多種協議，如FTP、HTTP、HTTPS。
2. 域名部分(host)：伺服器的域名或者IP地址
3. 埠號(port)：跟在域名後的埠，域名和埠之間使用 冒號 作為分隔符，一般埠號預設是80，使用預設埠號時可以省略不寫。
4. 虛擬目錄部分(path)：從域名第一個"/"開始到最後一個"/"為止，指訪問資源的路徑
5. 檔名部分(url-params)：指具體訪問的是哪個檔案資源，如果沒有，則使用預設檔名，如 index.vue、index.html、index.asp。
6. 引數部分(query-string)：傳送給http伺服器的資料，允許有多個引數，使用&連結多個引數。
7. 錨部分(anchor)：錨用來定位頁面展示的開始位置，是非必須的。

三、HTTP三次握手和四次分手

瀏覽器在給伺服器傳輸資料之前有三次握手，握手成功之後，才可以傳輸資料。

三次握手：連線請求，接受請求，傳送請求

四次分手：連線請求，接受請求，傳送請求，返回資料

 

四、HTTP請求--Request

客戶端包括瀏覽器給伺服器傳送請求時，包含四部分：

1. 請求行：設定請求型別，要訪問的資源以及使用的http版本
2. 請求頭：用來說明伺服器要使用的附加資訊，比如token經常放請求頭中。傳輸內容大小有限制，必須小於等於32k。
3. 空行：請求頭後面所必須的。
4. 請求體：請求資料也叫請求體，可以新增任意其他資料。傳輸內容較多，可小於等於1G。

五、HTTP響應--Response

一般情況下，伺服器接收並處理客戶端發過來的請求會返回一個HTTP響應訊息。包含四部分：

1. 狀態行：有 http協議版本號、狀態碼、狀態訊息三部分組成。
2. 訊息報頭：說明客戶端要使用的附加資訊。
3. 空行：訊息報頭後面的空行，是必須存在的。
4. 響應資料：伺服器返回給客戶端的文字資訊。

六、HTTP狀態碼

HTTP有請求時，伺服器返回的響應Response中狀態行內就包含了狀態碼，狀態碼主要用來告訴瀏覽器響應結果。

狀態碼有三位，主要分為六類：

• 1** ：1開頭的狀態碼主要表示資訊類提示，請求已接收，繼續處理。
• 2** ：2開頭的表示請求成功，200就是最常見的。
• 3** ：3開頭的表示重定向，要完成請求必須進行更進一步操作，304最常見
• 4** ：4開頭的表示客戶端錯誤，請求語法錯誤或請求無法實現，404請求資源不存在。
• 5** ：5開頭表示伺服器錯誤。500伺服器發生不可預期的錯誤
• 6** ：6開頭的擴充套件類。

七、HTTP請求方法

根據HTTP標準，HTTP請求可以使用多種請求方法。

HTTP1.0定義了三種請求方法：GET、POST、HEAD方法。

HTTP1.1新增了五種請求方法：OPTIONS、PUT、DELETE、TRACE和CONNECT方法。

序號	方法	描述
1	GET	請求指定的頁面資訊，並返回實體主體。
2	HEAD	類似於 GET 請求，只不過返回的響應中沒有具體的內容，用於獲取報頭
3	POST	向指定資源提交資料進行處理請求（例如提交表單或者上傳檔案）。資料被包含在請求體中。POST 請求可能會導致新的資源的建立和/或已有資源的修改。
4	PUT	從客戶端向伺服器傳送的資料取代指定的文件的內容。
5	DELETE	請求伺服器刪除指定的頁面。
6	CONNECT	HTTP/1.1 協議中預留給能夠將連線改為管道方式的代理伺服器。
7	OPTIONS	允許客戶端檢視伺服器的效能。
8	TRACE	回顯伺服器收到的請求，主要用於測試或診斷。
9	PATCH	是對 PUT 方法的補充，用來對已知資源進行區域性更新 。