axios從無從下手到手到擒來(2)-axios的理解與使用

本文基本不涉及代碼(除了API), 各位看官能夠在馬桶上當作催翔文來看. 做爲目前最流行的ajax請求庫, 而且vue/react官方都推薦使用,它究竟是個啥,咱們來捋一捋,若是有些地方看不太明白,我將會從第三篇文章中對着源碼爲各位看官解釋.

axios的github地址

---

1. axios的特色
  1). 基於promise的異步請求ajax庫
  2). 瀏覽器端/node端均可以使用
  3). 支持請求/相應攔截
  4). 支持請求取消
  5). 請求/響應數據轉換
  6). 批量發送多個請求

---

2. axios的經常使用語法
   axios(config) 通用/最經常使用/最本質的發送任意類型的請求的調用方式
   axios(url[,config]) 只指定url,發送get請求
   axios.request(config) 等同於axios(config)
   axios.get(url[,config]) 發get請求
   axios.post(url[,data,config]) 發送post請求
   axios.put(url[,data,config]) 發送put請求
   axios.delete(url[,config]) 發delete請求
   
   axios.defaults.xxx 請求的默認全局配置
   axios.interceptors.request.use() 添加請求攔截器
   axios.interceptors.response.user() 添加響應攔截器
   
   axios.create([config]) 建立一個新的axios(經過create建立的axios沒有如下功能)
   
   axios.Cancel() 建立取消請求的錯誤對象
   axios.CancelToken() 建立取消請求的token對象
   axios.isCancel() 是不是一個取消請求的錯誤
   axios.all(promises) 批量執行多個請求
   axios.spread() 指定接收全部成功數據的回調函數的方法

---

難點理解

1. axios.create([config])
1). 根據指定配置建立一個新的axios,也就是每一個axios都有本身的配置(若是沒有本身的配置,你還建立他幹啥)       
2). 新axios只是沒有取消請求和批量發請求的方法,其餘語法都是同樣的
3). 爲何要設計這麼個語法?
    假設你的項目很大,後端有多個host,使用一個axios顯然不能很好的解決這個問題.
    因此,你須要針對每個axios對象設置一個baseURL和其餘配置屬性,也就是使用create語法建立多個不一樣配置的axios

2. 攔截器函數/ajax請求/請求回調函數的調用順序
1). 調用axios()並非立刻發送ajax請求,須要經歷一系列流程
2). 假如你添加了兩個請求攔截器和響應攔截器
    流程: 請求攔截器2 => 請求攔截器1 => ajax請求 => 響應攔截器1 => 響應攔截器2
    爲啥請求攔截去先添加後執行,而請求攔截器卻先添加先執行?這個問題後面看到源碼便一目瞭然,莫方~
3). 此流程是經過promise串聯的,請求攔截器傳遞的是配置config,響應攔截器傳遞的是response

3. 取消請求的流程
1). 配置cancelToken對象
2). 緩存用於取消請求的cancel函數
3). 在特定的時機下調用cancel函數
4). 在error回調中判斷,若是error是cancel,作相應處理