vue中Axios的封裝和API接口的管理

請求攔截 參考
https://blog.csdn.net/qq_38145702/article/details/81558816?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
https://juejin.im/post/5b55c118f265da0f6f1aa354#heading-5

一、axios的封裝

在vue項目中，和后台交互獲取數據這塊，我們通常使用的是axios庫，它是基於promise的http庫，可運行在瀏覽器端和node.js中。

安裝

npm install axios; // 安裝axios

引入

一般我會在項目的src目錄中，新建一個request文件夾，然后在里面新建一個http.js和一個api.js文件。
http.js文件用來封裝我們的axios，api.js用來統一管理我們的接口。

http.js

// http.js
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模塊，用來序列化post類型的數據，后面會提到
// vant的toast提示框組件，大家可根據自己的ui組件更改。
import { Toast } from 'vant'; 

環境的切換

我們的項目環境可能有開發環境、測試環境和生產環境。我們通過node的環境變量來匹配我們的默認的接口url前綴。axios.defaults.baseURL可以設置axios的默認請求地址就不多說了。

// 環境的切換
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.設置post的請求頭為application/x-www-form-urlencoded;charset=UTF-8production.com';
}

設置請求超時

通過axios.defaults.timeout設置默認的請求超時時間。例如超過了10s，就會告知用戶當前請求超時，請刷新等。

axios.defaults.timeout = 10000;

post請求頭的設置

post請求的時候，我們需要加上一個請求頭，所以可以在這里進行一個默認的設置，即設置post的請求頭為application/x-www-form-urlencoded;charset=UTF-8

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';