一个项目最重要的就是数据交互,前端数据交互大多是利用ajax请求网络数据。为什么要包装ajax请求.
以下几个点.
一、建立统一返回数据格式。(在网站统一的返回数据格式,是建立容错处理机制的第一步)
二、建立统一容错处理机制(请求权限,超时,后台业务错误,服务器出错等等)
三、维护性高。
四、可基于网络请求,显示网络正在处理中,正在提交中。多种用于界面交互的功能。这个看自己业务需要不
调用方式:
配置接口
getRequest('配置接口名').done().fail()
getRequest('配置接口名').then(成功,失败)
// 网络请求
var globalConfigs = window.sysGlobalConfig,
serverConfig = globalConfigs.serverConfig,
config = {
'local': {
'dealconsumeList': 'data/dealconsumeList.js'
'TransactionRecord': 'data/TransactionRecord.js',
},
'dev': {
'logout':"out",// 退出接口
'login': "login", // 登录接口
}
};
function getEnvUrl(env,name)
{
var configUrl = config[env][name];
return configUrl && serverConfig[env] + configUrl;
}
config.getUrl = function (name) {
var url = getEnvUrl('dev', name) || getEnvUrl('local', name);
if (!url)
{
throw "config not found " + name;
}
return url;
}
module.exports = config;
function (module, exports, __require__) {
var configs = require('config'), responseStatus, ui = __require__(4).ui, noop = $.noop, globalAjaxSetting = {
inShowLoading: false,
isAutoCloseLoading: true,
isShowLoading: false
};
responseStatus = {
'ok': "000",// 成功
'customerError': "001", // 后台自定义错误
'requestError': "999" // 请求错误
};
$.ajaxSetup({
type: "GET",
dataType: "json",
global: true,
beforeSend: function () {
},
error: function (e) {
},
complete: function () {
}
});
$(document).ajaxStart(function (e) {
if (globalAjaxSetting.inShowLoading) {
globalAjaxSetting.isShowLoading = true;
ui.showLoading();
}
});
$(document).ajaxSend(function (evt, request, settings) {
});
$(document).ajaxComplete(function (evt, request, settings) {
});
$(document).ajaxStop(function () {
if (globalAjaxSetting.isShowLoading && globalAjaxSetting.isAutoCloseLoading) {
globalAjaxSetting.isShowLoading = false;
ui.hideLoading();
}
});
function wrapReuqest(options) {
var fialCallback = noop, successCallback = noop;
function wrapSuccess(callback) {
successCallback = _.isFunction(callback) ? callback : noop;
return options.isWrapAjax ? function (d) {
var retStatus = d.retStatus, retMsg = d.retMsg || "访问服务器出错";
if (retStatus == responseStatus.ok) {
return successCallback.call(this, d.retBody, d);
} else {
!options.isCustomerError && ui.alert(retMsg);
return fialCallback.call(this, retStatus, d);
}
} : successCallback;
}
function wrapFail(callback) {
fialCallback = _.isFunction(callback) ? callback : noop;
return function (e, errortext) {
if (e.status == "timeout") {
ui.alert('网络请求超时');
} else if (errortext == 'parsererror') {
ui.alert('系统出错了');
}
return fialCallback.call(this, responseStatus.requestError, e, errortext);
}
}
function retryRequest() {
sendRequest(options);
}
function sendRequest(options) {
var ajax = $.ajax(options), then = ajax.then, done = ajax.done, fail = ajax.fail;
return _.extend(ajax, {
then: function (scb, ecb) {
var success = wrapSuccess(scb), dthen;
dthen = then(function () {
var result = success.apply(this, arguments);
if (_.isPlainObject(result) && result.promise) {
result.done(wrapSuccess(function () {
dthen.resolveWith(this, arguments);
})).fail(wrapFail(function () {
dthen.rejectWith(this, arguments)
}));
}
}, wrapFail(ecb));
return dthen;
},
done: function (cb) {
done(wrapSuccess(cb));
return ajax;
},
fail: function (cb) {
fail(wrapFail(cb));
return ajax;
}
});
}
options.data = options.data || {};
if (!_.has(options.data, "caseId")) {
options.data.caseId = Masa.business.getCaseId();
}
options.isCustomerError = _.has(options, 'isCustomerError') ? options.isCustomerError : false;
options.isWrapAjax = _.has(options, 'isWrapAjax') ? options.isWrapAjax : true;
globalAjaxSetting.inShowLoading = options.inShowLoading = _.has(options, 'inShowLoading') ? options.inShowLoading : true;
globalAjaxSetting.isAutoCloseLoading = options.isAutoCloseLoading = _.has(options, 'isAutoCloseLoading') ? options.isAutoCloseLoading : true;
return sendRequest(_.omit(options, ['isCustomerError', 'inShowLoading', 'isAutoCloseLoading', 'isWrapAjax']));
}
function request(name, options) {
options = options || {};
if (name != "*") {
options.url = configs.getUrl(name);
}
return wrapReuqest(options);
}
function postRequest(name, options) {
options = options || {};
options.type = "post";
return request(name, options);
}
function getRequest(name, options) {
options = options || {};
options.type = "get";
return request(name, options);
}
module.exports = {
request: request,
getRequest: getRequest,
postRequest: postRequest
};
}