axios是一個基于promise的http庫，類似于jquery的ajax，用于http請求。可以應用于浏覽器端和node.js，既可以用于用戶端，也可以用于node.js編寫的服務端。
（1）支援promise api
（2）攔截請求與響應，比如：在請求前添加授權和響應前做一些事情。
（3）轉換請求資料和響應資料，比如：進行請求加密或者響應資料加密。
（4）取消請求
（5）自動轉換json資料
（6）用戶端支援防禦xsrf
firefox、chrome、safari、opera、edge、ie8+。
打開控制台瞅兩眼，已經有資料了
方法列舉：get, post, put, patch, delete等。
get：一般使用者擷取資料
post：一般用于表單送出與檔案上傳
patch：更新資料（隻将修改的資料推送到後端）
put：更新資料（所有資料推送到服務端）
delete：删除資料
備注：post一般用于建立資料，put一般用于更新資料，patch一般用于資料量較大的時候的資料更新。
方式一
方式二
帶有參數後get請求實際是http://xxxxx/data.json?id=12，寫了這麼多結果就是url加了參數。
浏覽器控制台相關資訊介紹：
request url：請求url
request method：請求方式
post請求常用的資料請求格式有兩種：
1.form-data（常用于表單送出（圖檔上傳、檔案上傳））
注意：請求位址request url: http://xxxxxxx/data.json，
請求頭中content-type: multipart/form-data; boundary=——webkitformboundarydgohzxgszdfws16y
參數形式：id:12
2.application/json（常用）
注意：請求位址request url: http://xxxxxxxx/data.json，
請求頭中content-type: application/json;charset=utf-8
參數形式：{ id:12 }
方式一：params
方式二：data
注意：params方式會将請求參數拼接在url上面，request url: http://xxxxxxxx/data.json?id=12
content-type: text/html; charset=utf-8
data方式不會講參數拼接，是直接放置在請求體中的，request url: http://xxxxxxxx/data.json
參數形式：{id:12}
content-type: application/json;charset=utf-8
總結：上述方法中均對應兩種寫法：（1）使用别名：形如axios.get()；（2）不使用别名形如axios()；
并發請求，就是同時進行多個請求，并統一處理傳回值。類似promise.all。
在下面例子中，我們使用axios.all，對data.json/city.json同時進行請求，使用axios.spread，對傳回的結果分别進行處理。代碼如下：
注意：axios.all的參數是請求函數的數組，在對應的回調then中，調用axios.spead對傳回值進行處理，即可。
并發請求的應用場景：需要同時進行多個請求，并且需要同時處理接口調用的傳回值的時候，我們可以使用并發請求。
比如：後端接口位址有多個（www.test.com、www.example.com），并且逾時時長不同（1000ms、2000ms），這個時候，我們可以建立執行個體。
思路如下：建立多個執行個體，配置不同的逾時時長，用不同的執行個體去請求不同的接口。使用axios.acreate來建立執行個體，配置相關資訊，進行網絡請求。代碼如下：
備注：此時我們就可以通路http://loacalhost:8080與http://loacalhost:8081兩個不同域名的接口，并且使用不同的配置。
（1）配置清單
baseurl：請求的域名（基本位址）。
timeout：請求的逾時時長，超出後後端傳回401。
備注：一般由後端定義，後端的接口需要的處理時長較長的時候，如果請求的時間過長，後端處理不過來，就會阻塞，給伺服器造成較大的壓力。設定後，可以及時釋放掉。
url：請求路徑。
method：請求方法。如：get、post、put、patch、delete等。
headers：請求頭。
params：将請求參數拼接到url上
data：将請求參數放置到請求體裡
（2）三種配置方式
axios全局配置
axios執行個體配置
axios請求配置
優先級：axios全局配置 < axios執行個體配置 < axios請求配置
舉例1：
分析：配置的參數為baseurl：‘http://localhost:9090’，timeout:1000，method:‘get’，params:{ id:10}，url:’/contactlist’
舉例2：
分析：配置的參數為baseurl：‘http://localhost:9091’，timeout:5000，method:‘get’，url:’/contactlist’
注意：最終的有效配置是由優先級高的覆寫優先級低的。
什麼是攔截器？
在請求前或響應被處理前攔截他們，分為兩種：請求攔截器與響應攔截器。
攔截器的使用方法
請求攔截器
響應攔截器
取消攔截器
實用舉例a：登入權限
需要token的接口執行個體
不需要token的接口執行個體
實用舉例b：移動端開發資料加載loading動畫
備注：實作的效果是請求資料的時候顯示loading動畫，資料響應後隐藏loading動畫。
結合請求攔截器與響應攔截器來說，不管是請求錯誤還是響應錯誤，都會執行catch方法。
錯誤處理舉例
在實際開發中，不會再每次網絡請求的時候，使用catch方法，可以添加統一的錯誤處理方法。代碼如下：
思路分析：首先建立執行個體，給執行個體設定請求攔截器與響應攔截器。
（1）請求錯誤的常見狀态碼以4開頭，如401-請求逾時、404-接口未找到；
（2）響應錯誤的常見狀态碼以5開頭，如500-伺服器錯誤、502-伺服器重新開機等。
（3）處理設定請求攔截器與響應攔截器的操作外，如果還要其他操作，我們可以在請求的時候，在使用catch方法。
應用場景
在查詢資料的時候，很長時間（3-5s）仍未擷取資料，這個時候需要取消請求。
axios 請求的封裝，無非是為了友善代碼管理，我們可以使用抽離拆分的思想，将不同功能子產品的接口處理成不同的子產品，然後封裝一個方法，專門用于資料互動。
第一步：建立 src/service/contactapi.js 檔案
備注：該檔案的用途隻有一個，定義不同的接口請求資訊（包含 method、url等）并導出使用。當接口增加或者删除的時候，隻需要定義在該檔案中即可。
第二步：建立 src/service/http.js 檔案
具體的思路步驟如下：
首先，我們引入contactapi.js檔案，别名定義為 service。
定義新的 axios 執行個體，針對目前功能子產品聯系人清單管理 contactlist ，配置baseurl基礎域名、timeout請求逾時時間等等，差別于其他功能子產品。
定義 http 作為請求方法的容器，配置對應的參數(即請求方法中的其他資訊，比如 headers，content-type，token等等)。需要注意的是，在其中我們要區分 content-type的形式有兩種：form-data 與 application/json，它們的參數配置不同，form-data 形式的參數，我們需要定義 formdata 對象。具體如下：
溫馨提示：其中 isformdata 定義為 boolean 變量，用于辨別是否為 formdata 形式。
根據不同的請求方式，發起網絡請求，并導出傳回值。
注意：對于不同方法的差別在于：get 與 delete 的參數在 config 中配置，而不是使用 params 。
設定請求攔截器與響應攔截器
導出src/service/http.js檔案，用于其他地方的引入。
注意：在使用的時候，我們需要結合 async 與 await 才能正确使用。具體的使用方法是：
在定義的網絡請求函數前增加 async 辨別。
在接收請求傳回資料的時候，增加 await 辨別。
提示：在上面函數中，隻有在 res 拿到後才會執行 this.list = res.data; 相當于在對應的 then 中執行的語句，避免了回調地獄。
axios在送出表單請求時會自動設定content-type，此時手動設定時無效的。
在進行項目開發的時候，我們需要對網絡請求的方法進行封裝，可以有效地減少後期代碼維護的難度，建議開發者根據不同的功能子產品進行拆分，友善後期代碼問題的定位。另外，也能實作代碼的低耦合，避免出現更多的重複代碼。
首先，我們引入contactapi.js檔案，别名定義為 service。