vue使用封裝的axios
阿新 • • 發佈:2018-12-13
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);
})
})
}