好習(xí)慣不能丟，先上成果

思路：

1. 引入axios

2. 實(shí)例化一個axios起名request

3. 為request配置請求和響應(yīng)的攔截器

4. 請求攔截器中：為請求頭帶上json web token（也有用cookie的，看后端），并開啟加載動畫

5. 響應(yīng)攔截器中：無論成功還是失敗先關(guān)閉加載動畫、判斷響應(yīng)status是否為200，若是則返回data，反之，彈出消息提示并中斷promise鏈

6. 用async函數(shù)再包一層、實(shí)現(xiàn)自定義泛型為請求結(jié)果聲明類型

7. 導(dǎo)出包裝后的async函數(shù)

坑：

• 上面那個是為Vue3項(xiàng)目封裝的，React項(xiàng)目不能直接拿去用

• 請求過程的加載動畫和請求失敗的消息提示依賴于element-plus

• 響應(yīng)攔截器中對于HTTP的status判斷過于簡單粗暴，實(shí)際上status在200~299之間都算成功

• 如果status為200，響應(yīng)結(jié)果會自動解包為data不需在then中手動再解

• 不支持get、post、put、delete等別名調(diào)用

• 加載動畫是需要真實(shí)DOM的，在DOM掛載前就發(fā)起請求可能會出現(xiàn)問題

HTTP狀態(tài)碼：

• 1xx：服務(wù)端收到客戶端的請求，但還需要客戶端下一步動作

• 2xx：通俗的說，就是成功了

• 3xx：需要重定向

• 4xx：客戶端有問題，比如404客戶端的請求找不到對應(yīng)資源，401客戶端未攜帶正確的token或cookie認(rèn)證信息

• 5xx：服務(wù)器報錯，出現(xiàn)這個找后端就完了，一般不是前端的鍋