1. 前後應用從瀏覽器端向伺服器傳送HTTP請求(請求報文)
2. 後臺伺服器接收到請求後, 排程伺服器應用處理請求, 向瀏覽器端返回HTTP響應(響應報文)
3. 瀏覽器端接收到響應, 解析顯示響應體/呼叫監視回撥
1. 請求行: 請求方式/url
2. 多個請求頭: 一個請求頭由name:value組成, 如Host/Cookie/Content-Type頭
3. 請求體
1. 響應行: 響應狀態碼/對應的文字
2. 多個響應頭: 如 Content-Type / Set-Cookie 頭
3. 響應體
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}
200 OK 請求成功。一般用於GET與POST請求
201 Created 已建立。成功請求並建立了新的資源
401 Unauthorized 未授權/請求要求使用者的身份認證
404 Not Found 伺服器無法根據客戶端的請求找到資源
500 Internal Server Error 伺服器內部錯誤，無法完成請求
1. GET: 從伺服器端讀取資料
2. POST: 向伺服器端新增新資料
3. PUT: 更新伺服器端已經資料
4. DELETE: 刪除伺服器端資料
1. REST API: restful
傳送請求進行CRUD哪個操作由請求方式來決定
同一個請求路徑可以進行多個操作
請求方式會用到GET/POST/PUT/DELETE
2. 非REST API: restless
請求方式不決定請求的CRUD操作
一個請求路徑只對應一個操作
一般只有GET/POST
測試: 可以使用json-server快速搭建模擬的rest api 介面
使用XMLHttpRequest (XHR)物件可以與伺服器互動, 也就是傳送ajax請求
前端可以獲取到資料，而無需讓整個的頁面重新整理。
這使得Web頁面可以只更新頁面的區域性，而不影響使用者的操作。
ajax請求是一種特別的http請求: 只有通過XHR/fetch傳送的是ajax請求, 其它都是一般HTTP請求
對伺服器端來說, 沒有任何區別, 區別在瀏覽器端
瀏覽器端發請求: 只有XHR或fetch發出的才是ajax請求, 其它所有的都是非ajax請求
瀏覽器端接收到響應
一般請求: 瀏覽器一般會直接顯示響應體資料, 也就是我們常說的重新整理/跳轉頁面
ajax請求: 瀏覽器不會對介面進行任何更新操作, 只是呼叫監視的回撥函式並傳入響應相關資料
函式的返回值為promise, 成功的結果為response, 異常的結果為error
能處理多種型別的請求: GET/POST/PUT/DELETE
函式的引數為一個配置物件: url/method/params/data
響應json資料自動解析為了js
基於promise的封裝XHR的非同步ajax請求庫
瀏覽器端/node端都可以使用
支援請求／響應攔截器
支援請求取消
請求/響應資料轉換
批量傳送多個請求
axios(config): 通用/最本質的發任意型別請求的方式
axios(url[, config]): 可以只指定url發get請求
axios.request(config): 等同於axios(config)
axios.get(url[, config]): 發get請求
axios.delete(url[, config]): 發delete請求
axios.post(url[, data, config]): 發post請求
axios.put(url[, data, config]): 發put請求
axios.defaults.xxx: 請求的預設全域性配置
axios.interceptors.request.use(): 新增請求攔截器
axios.interceptors.response.use(): 新增響應攔截器
axios.create([config]): 建立一個新的axios(它沒有下面的功能)
axios.Cancel(): 用於建立取消請求的錯誤物件
axios.CancelToken(): 用於建立取消請求的token物件
axios.isCancel(): 是否是一個取消請求的錯誤
axios.all(promises): 用於批量執行多個非同步請求
axios.spread(): 用來指定接收所有成功資料的回撥函式的方法
1. axios與Axios的關係
axios函式對應的是Axios.prototype.request方法通過bind(Axiox的例項)產生的函式
axios有Axios原型上的所有發特定型別請求的方法: get()/post()/put()/delete()
axios有Axios的例項上的所有屬性: defaults/interceptors
後面又新增了create()/CancelToken()/all()
2. axios.create()返回的物件與axios的區別
1). 相同:
都是一個能發任意請求的函式: request(config)
都有發特定請求的各種方法: get()/post()/put()/delete()
都有預設配置和攔截器的屬性: defaults/interceptors
2). 不同:
預設匹配的值不一樣
instance沒有axios後面新增的一引起方法: create()/CancelToken()/all()
3. axios發請求的流程
1). 整體流程: request(config) ===> dispatchRequest(config) ===> xhrAdapter(config)
2). request(config): 將請求攔截器 / dispatchRequest() / 響應攔截器 通過promise鏈串連起來, 返回promise
3). dispatchRequest(config): 轉換請求資料 ===> 呼叫xhrAdapter()發請求 ===> 請求返回後轉換響應資料. 返回promise
4). xhrAdapter(config): 建立XHR物件, 根據config進行相應設定, 傳送特定請求, 並接收響應資料, 返回promise
4. axios的請求/響應攔截器是什麼?
1). 請求攔截器: 在真正發請求前, 可以對請求進行檢查或配置進行特定處理的函式,
包括成功/失敗的函式, 傳遞的必須是config
2). 響應攔截器: 在請求返回後, 可以對響應資料進行特定處理的函式,
包括成功/失敗的函式, 傳遞的預設是response
5. axios的請求/響應資料轉換器是什麼?
1). 請求轉換器: 對請求頭和請求體資料進行特定處理的函式
setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
return JSON.stringify(data)
2). 響應轉換器: 將響應體json字串解析為js物件或陣列的函式
response.data = JSON.parse(response.data)
6. response的整體結構
{
data,
status,
statusText,
headers,
config,
request
}
7. error的整體結構
{
message,
request,
response
}
8. 如何取消未完成的請求
1).當配置了cancelToken物件時, 儲存cancel函式
建立一個用於將來中斷請求的cancelPromise
並定義了一個用於取消請求的cancel函式
將cancel函式傳遞出來
2.呼叫cancel()取消請求
執行cacel函式, 傳入錯誤資訊message
內部會讓cancelPromise變為成功, 且成功的值為一個Cancel物件
在cancelPromise的成功回撥中中斷請求, 並讓發請求的proimse失敗, 失敗的reason為Cacel物件