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);
})
})
}