vue使用封裝的axios

vue使用封裝的axios

日常使用Vue的項目中，通常使用axios進行數據請求，但重複使用需要更好的進行‘包裝’一下。
以下是根據日常項目所用到的方法進行的封裝。

'use strict';
import axios from 'axios'
import qs from 'qs'

// 配置請求默認項
axios.defaults = {
    timeout: 10000,
    headers: {
        'Conent-Type': 'application/json'
    }
}
// 設置請求攔截器
axios.interceptors.request.use(config => {
	// 可在這裏加請求數據的動效loading
    return config;
}, error => {
    return new Promise.reject(error);
})
// 設置響應攔截器
axios.interceptors.response.use(res => {
	// 在這裏取消請求數據的動效loading
    return res.data
}, error => {
	// 在這裏取消請求數據的動效loading
    return Promise.reject(`響應code：${error.status}\n響應結果：${error.response}`)
})
/**
 * 封裝axios.get請求
 * @param {String} url [請求url地址]
 * @param {Object} params [請求攜帶參數]
 */
export const fetchGet = (url, params) => {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then(res => {
            resolve(res)
        }).catch(error => {
            reject(error);
        })
    })
}
/**
 * 封裝axios.post請求
 * @param {String} url [請求url地址]
 * @param {Objeect} params [請求攜帶參數]
 * @param {String} responseType [響應數據格式]
 */
export const fetchPost = (url, params, responseType) => {
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url: url,
            data: qs(params),
            responseType: responseType || 'json'
        }).then(res => {
            resolve(res)
        }).catch(error => {
            reject(error);
        })
    })
}
/**
 * 封裝axios.all併發請求
 * @param {Array} queryList [請求配置項, eg:[{method:'get', url:'api/data'}]]
 */
export const fetchAll = (queryList) => {
    let query = queryList.map((item) => {
        if (item.method === 'get') {
            return fetchGet(item.url, item.params)
        } else {
            return fetchPost(item.url, item.params, item.responseType)
        }
    });
    return new Promise((resolve,reject)=>{
        axios.all(query).then(accpt=>{
            resolve(accpt)
        }).catch(error=>{
            reject(error);
        })
    })
}