- 首页 > it技术 > >
vue框架整理（一）—|vue框架整理（一）— axios
在fetch和axios两者之间，对比fetch的某些功能的缺失，如中断请求，进度条实现，最终选择了axios，而且在axios中，还扩张了不少功能，如拦截器，允许转换请求数据和响应数据等
npm install axios
- 调用（考虑到基本每个页面都会使用到该方法，且该功能同时还需要搭配加载层，统一处理错误等，故我将axios二次封装在action.js中，在action中支持异步操作及触发多个commit）
- 【vue框架整理（一）—|vue框架整理（一）— axios】生成全局axios对象并添加全局拦截器
/*
* 请求数据接口拦截器处理
*/
let _axios = axios.create();
//添加请求拦截器
_axios.interceptors.request.use(function(configuration){
//在发送请求之前做某事
// 值得注意的是，当type为get时，axios的传参key为params，其它均为data
let data,key;
if(configuration.method.toLowerCase() !== 'get') {
data = https://www.it610.com/article/configuration.data;
key ='data';
} else {
data = https://www.it610.com/article/configuration.params;
key ='params';
}
if(typeof(data) === 'string' ) {
data += '&reqChannelType=' + config.platform + '&reqFlowNo=' + dateUtils.getNowRandomTimes();
} else {
data['reqChannelType'] = config.platform;
// 使用平台标识
data['reqFlowNo'] = dateUtils.getNowRandomTimes();
// 请求流水号
}
configuration[key] = data;
return configuration;
}, function(error){
//请求错误时做些事
return Promise.reject(error);
});
//添加响应拦截器
_axios.interceptors.response.use(function(response){
//对响应数据做些事
return response;
}, function(error){
//请求错误时做些事
return Promise.reject(error);
});
// 本人项目接口返回数据做了特殊处理，故错误处理相对简单点
$ajax({commit, state}, {
url,
type, // 默认POST
data,
responseType,
withCredentials, // 跨域时，请求是否带上cookie，默认true
headers,
timeout,
isShowWait, // 是否显示加载层，默认true
isLastRequest, // 是否为最后一个请求，默认true
errorCatch, // 是否捕捉错误信息，默认false（一旦捕捉错误，调用时会返回错误信息）
onUploadProgress,
onDownloadProgress
}) {
const requestDataType = type && type.toLowerCase() === 'get' ? 'params' : 'data';
let setHeaders = {
'X-Requested-with' : 'XMLHttpRequest',
'Content-Type' : 'application/x-www-form-urlencoded;
charset=UTF-8'
};
if(typeof(headers) == "object" && Object.prototype.toString.call(headers).toLowerCase() == "[object object]" && !headers.length) {
for(let index in headers) {
if(index.toLowerCase() !== 'x-requested-with' && index.toLowerCase() !== 'content-type') {
setHeaders[index] = headers.index;
}
}
}// 修改状态值，是否显示加载层
const iShowWait = isShowWait === false ? false : true;
const iLastRequest = isLastRequest === false ? false : true;
return new Promise((resolve, reject) => {
_axios({
'url' : url || config.serverPath,
'method' : type || 'POST',
'responseType' : responseType || 'json',
[requestDataType] : data || {},
'withCredentials' : withCredentials === false ? false : true,
'headers' : setHeaders,
'timeout' : timeout || config.ajaxTimeout * 1000,
'onUploadProgress' : onUploadProgress || function() {},
'onDownloadProgress' : onDownloadProgress || function() {},
'transformRequest' : [function (data) {
//`transformRequest`允许请求的数据在传到服务器之前进行转化。这个只适用于`PUT`,`GET`,`PATCH`方法。
// 该方法在请求拦截器之后执行
// 修改加载层状态值(这是本人开发的一个类似转菊花的等待层组件)
commit(muType.CHANGE_ILOADING, {iShowWait, iLastRequest});
let str = ''
for (let it in data) {
if(str) {
str += '&';
}
str += encodeURIComponent(it) + '=' + encodeURIComponent(data[it])
}
return str
}],
'transformResponse' : [function(data){
//`transformResponse`允许返回的数据传入then/catch之前进行处理，报错不会经过该方法
// 该方法在响应拦截器之前执行
return data;
}]
}).then(res => {
// 由于该项目对接口返回出参进行了封装，需要这里的成功不一定是请求成功
let data = https://www.it610.com/article/res.data,
error_no = data.error_no,
error_info = data.error_info;
if(error_no == 0) {
// 请求成功
// 修改加载层状态值
let closeLoading = true;
commit(muType.CHANGE_ILOADING, {closeLoading, iLastRequest});
var results = getReqResultList(data);
resolve(results);
} else {
// 请求失败
// 修改加载层状态值
let clearLoading = true;
commit(muType.CHANGE_ILOADING, {clearLoading});
MessageBox.alert(error_info);
if(errorCatch) {
reject(res);
}
}
}).catch(err => {
// 修改加载层状态值
let clearLoading = true;
commit(muType.CHANGE_ILOADING, {clearLoading});
if((err + '').search('timeout') !== -1) {
// 超时导致的
MessageBox.alert('请求超时,请检查接口是否异常或者网络不通');
} else {
// 其它错误，暂不细分，等出现再处理
MessageBox.alert('服务器异常，错误信息:' + err);
}
if(errorCatch) {
reject(err);
}
});
});
}
import { mapActions } from 'vuex'
// 在method中引入方法
...mapActions([
'$ajax'
])
// this.$ajax({
data: {
'funcNo': '1000516',
'busi_type': '0',
'share_type': this.share_type,
'user_id': this.user_id,
'op_channel': 3
}
}).then(res => {
}.catch(err => {
// 只有当设置了errorCatch，才会调用该处
})
推荐阅读
