vue中Axios的封裝

在項目中使用axios來做爲和後臺的數據交互，那每每須要根據本身的須要來對axios作一些定製化的封裝，也便於項目的後期更新維護。咱們所使用的axios庫是基於promise的http庫。擁有不少的特性，如攔截請求和響應、取消請求、轉換json等，因此這也是它能夠代替原先vue-resource的緣由

1.安裝

npm install axios;
複製代碼

2.引入

能夠選擇在src下建一個axios.js,用於封裝咱們的axios（固然這個能夠本身選擇，只要作到正確引入便可）

// axios.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模塊，用來序列化post類型的數據
複製代碼

3.環境的切換(環境的切換也是能夠在config下的index.js裏面進行配置，能夠自行選擇)

項目環境會有開發環境，測試環境和生產環境。咱們能夠經過node的環境變量來設置咱們的默認的接口url前綴。此處的axios.defaults.baseURL能夠設置axios的默認請求地址。在發送請求的時候會家在接口url的前面。這在項目開發過程當中能夠顯得很高效。

// 環境的切換
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://www.dev.com';
} else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.pro.com';
}
複製代碼

4.設置請求超時

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

5.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';
複製代碼

6.請求攔截

咱們在發送請求前能夠進行一個請求的攔截，攔截的意義在哪裏呢，咱們攔截請求是用來作什麼的呢？好比，有些請求是須要用戶登陸以後才能訪問的，或者post請求的時候，咱們須要序列化咱們提交的數據。這時候，咱們能夠在請求被髮送以前進行一個攔截，對一些必要的條件進行驗證。從而進行咱們想要的操做。

// 先導入vuex,由於可能要使用到裏面的狀態對象
// vuex的能夠路徑根據本身的路徑去寫
import store from '@/store/index';

// 請求攔截器axios.interceptors.request.use( 
    config => {        
        // 每次發送請求以前判斷vuex中是否存在token 
        // 若是存在，則統一在http請求的header都加上token，這樣後臺根據token判斷你的登陸狀況
        // 即便本地存在token，也有可能token是過時的，因此在響應攔截器中要對返回狀態進行判斷 
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
    },    
    error => {        
        return Promise.error(error);    
})
複製代碼

此處的token是在用戶登錄完成以後，將用戶的token經過localStorage或者cookie存在本地，而後在每次進入頁面的時候（也就是在main.js中進行判斷），會首先從本地存儲token,若是token存在說明用戶已經登錄過。而後，在每次請求接口的時候，都會在請求的header中攜帶token，後臺人員就能夠根據你攜帶的token來判斷你的登陸是否過時，若是沒有攜帶，則說明沒有登陸過

7.響應攔截

// 響應攔截器
axios.interceptors.response.use(    
    response => {   
        // 若是返回的狀態碼爲200，說明接口請求成功，能夠正常拿到數據 
        // 不然的話拋出錯誤
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }    
    },    
    // 服務器狀態碼不是2開頭的的狀況
    // 這裏能夠跟大家的後臺開發人員協商好統一的錯誤狀態碼 
    // 而後根據返回的狀態碼進行一些操做，例如登陸過時提示，錯誤提示等等
    // 下面列舉幾個常見的操做，其餘需求可自行擴展
    error => {            
       if (error.response.status) {            
            switch (error.response.status) {                
                // 401: 未登陸
                // 未登陸則跳轉登陸頁面，並攜帶當前頁面的路徑
                // 在登陸成功後返回當前頁面，這一步須要在登陸頁操做。 
                case 401:                    
                    router.replace({                        
                        path: '/login',                        
                        query: { 
                            redirect: router.currentRoute.fullPath 
                        }
                    });
                    break;

                // 403 token過時
                // 登陸過時對用戶進行提示
                // 清除本地token和清空vuex中token對象
                // 跳轉登陸頁面 
                case 403:
                     Toast({
                        message: '登陸過時，請從新登陸',
                        duration: 1000,
                        forbidClick: true
                    });
                    // 清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳轉登陸頁面，並將要瀏覽的頁面fullPath傳過去，登陸成功後跳轉須要訪問的頁面 
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 

                // 404請求不存在
                case 404:
                    Toast({
                        message: '網絡請求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
                // 其餘錯誤，直接拋出錯誤提示
                default:
                    Toast({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }    
});
複製代碼

響應攔截器很好理解，就是服務器返回給咱們的數據，咱們在拿到以前能夠對他進行一些處理。例如上面的思想：若是後臺返回的狀態碼是200，則正常返回數據，不然的根據錯誤的狀態碼類型進行一些咱們須要的錯誤，其實這裏主要就是進行了錯誤的統一處理和沒登陸或登陸過時後調整登陸頁的一個操做。

經過對axios的封裝，可使咱們對每個請求有更多的控制，而且能夠針對不一樣的狀況進行不同的配置處理，顯得更加的靈活