axios封裝get方法和post方法

我們常用的ajax請求方法有get、post、put等方法，相信小伙伴都不會陌生。axios對應的也有很多類似的方法，不清楚的可以看下文檔。但是為了簡化我們的代碼，我們還是要對其進行一個簡單的封裝。下面我們主要封裝兩個方法：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模塊來序列化我們的參數。這個很重要，如果沒有序列化操作，后台是拿不到你提交的數據的。如果不明白序列化是什么意思的，就百度一下吧

/** 
 * 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.get()方法和 axios.post()在提交數據時參數的書寫方式還是有區別的。區別就是，get的第二個參數是一個{}，然后這個對象的params屬性值是一個參數對象的。而post的第二個參數就是一個參數對象。兩者略微的區別要特別注意！