vue -- axios封裝和api接口管理

axios封裝【https://juejin.im/post/5b55c118f265da0f6f1aa354】

在vue項目中，一般和后台數據交互獲取，使用的是axios庫，它是基於promise的http庫，可運行到瀏覽器和node.js中。

axios的特性：

• 攔截請求和響應；
• 取消請求；
• 轉換JSON
• 客戶端防御XSRF等

安裝：

npm install axios;  //安裝axios

引入：【可以在項目的src中，新建一個request文件夾，然后里面新建兩個文件，http.js和api.js。http.js文件用來封裝axios，api.js文件用來統一管理我們的接口。】

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

環境的切換：【項目中有開發環境、測試環境和生產環境，我們通過node的環境變量來匹配我們的默認接口url前綴。】

//環境的切換
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.production.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';

請求攔截：

我們在發送請求前可以進行一個請求的攔截，為什么要攔截呢，我們攔截請求是用來做什么的呢？比如，有些請求是需要用戶登錄之后才能訪問的，或者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;
    },
    err => {
       return Promise.error(error);
    }
)

這里說一下token，一般是在登錄完成之后，將用戶的token通過localStorage或者cookie存在本地，然后用戶每次在進入頁面的時候（即在main.js中），會首先從本地存儲中讀取token，如果token存在說明用戶已經登陸過，則更新vuex中的token狀態。然后，在每次請求接口的時候，都會在請求的header中攜帶token，后台人員就可以根據你攜帶的token來判斷你的登錄是否過期，如果沒有攜帶，則說明沒有登錄過。這時候或許有些小伙伴會有疑問了，就是每個請求都攜帶token，那么要是一個頁面不需要用戶登錄就可以訪問的怎么辦呢？其實，你前端的請求可以攜帶token，但是后台可以選擇不接收。

 

響應的攔截：

// 響應攔截器
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，則正常返回數據，否則的根據錯誤的狀態碼類型進行一些我們需要的錯誤，其實這里主要就是進行了錯誤的統一處理和沒登錄或登錄過期后調整登錄頁的一個操作。

 

封裝get方法和post方法：

get方法：【

我們通過定義一個get函數，get函數有兩個參數，第一個參數表示我們要請求的url地址，第二個參數是我們要攜帶的請求參數。get函數返回一個promise對象，當axios其請求成功時resolve服務器返回 值，請求失敗時reject錯誤值。最后通過export拋出get函數。

】

/**
 * get方法，對應get請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的參數]
 */
export function get(url, params){    
    return new Promise((resolve, reject) =>{        
        axios.get(url, {            
            params: params        
        }).then(res => {
            resolve(res.data);
        }).catch(err =>{
            reject(err.data)        
    })    
});}

post方法：【

原理同get基本一樣，但是要注意的是，post方法必須要使用對提交從參數對象進行序列化的操作，所以這里我們通過node的qs模塊來序列化我們的參數。這個很重要，如果沒有序列化操作，后台是拿不到你提交的數據的。這就是文章開頭我們import QS from 'qs';的原因。

】

** 
 * post方法，對應post請求 
 * @param {String} url [請求的url地址] 
 * @param {Object} params [請求時攜帶的參數] 
 */
export function post(url, params) {
    return new Promise((resolve, reject) => {
         axios.post(url, QS.stringify(params))
        .then(res => {
            resolve(res.data);
        })
        .catch(err =>{
            reject(err.data)
        })
    });
}

完整的axios封裝

 

/**axios封裝
 * 請求攔截、相應攔截、錯誤統一處理
 */
import axios from 'axios';import QS from 'qs';
import { Toast } from 'vant';
import store from '../store/index'

// 環境的切換
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'http://api.123dailu.com/';
}

// 請求超時時間
axios.defaults.timeout = 10000;

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

// 請求攔截器
axios.interceptors.request.use(    
    config => {
        // 每次發送請求之前判斷是否存在token，如果存在，則統一在http請求的header都加上token，不用每次請求都手動添加了
        // 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
    },    
    error => {        
        return Promise.error(error);    
    })

// 響應攔截器
axios.interceptors.response.use(    
    response => {        
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }    
    },
    // 服務器狀態碼不是200的情況    
    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);        
        }       
    }
);
/** 
 * get方法，對應get請求 
 * @param {String} url [請求的url地址] 
 * @param {Object} params [請求時攜帶的參數] 
 */
export function get(url, params){    
    return new Promise((resolve, reject) =>{        
        axios.get(url, {            
            params: params        
        })        
        .then(res => {            
            resolve(res.data);        
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
}
/** 
 * post方法，對應post請求 
 * @param {String} url [請求的url地址] 
 * @param {Object} params [請求時攜帶的參數] 
 */
export function post(url, params) {    
    return new Promise((resolve, reject) => {         
        axios.post(url, QS.stringify(params))        
        .then(res => {            
            resolve(res.data);        
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
}