对Ext JS的Ajax作了一个简单的封装,以期能适应业务需要。这里只展示了类中的一个方法,希望高手能多提意见。
1、类的定义
/**
* 自己的Ajax
*/
Ext.define('Mine.util.Ajax', {
xtype: 'myajax',
token: localStorage.getItem("my-token"),
apiDomain: 'http://mydomain.com',//服务端域名
/**
*对象型参数的ajax请求
* @param options object 参数对象
* * {
* * url:string api地址,不含域名(*)
* * method:enum 请求类型(POST as default) optional
* * if_serialize 是否需要转成JSON (true as default) optional
* * headers:头部信息(其中的Content-Type默认值为applicatoin/json as default) optional
* * data:object 要传输的数据,默认为{} optional
* * success:fn 请求成功时的处理函数 签名:function(returnObj,opts) optional
* * * returnObj:object 服务端返回数据 optional
* * * opts:object 传入的参数参数 optional
* * }
* @constructor
*/
Ajax: function (options) {
var method = options.method || 'POST';
var origData = options.data || {};
var data = options.if_serialize ? JSON.parse(origData) : origData;
var success = options.success || this.successProcess;
var headers = {
"X-AUTH-TOKEN": this.token,
"Content-Type": 'application/json'
};
if (options.headers) {
Object.assign(headers, options.headers);
}
if (!Ext.isEmpty(this.token)) {
var me = this;
Ext.Ajax.request({
url: this.apiDomain + options.url,
method: method,
headers: headers,
params: data,
scope: this,
success: function (response, opts) {
var status = response.status;
var returnObj = {};
if (!Ext.isEmpty(response.responseText)) {
returnObj = JSON.parse(response.responseText);
}
if (status >= 200 && status < 300) {
success(returnObj, opts);
}
},
failure: me.failProcess
});
}
},
/**
* 请求失败时的处理
* @param response
* @param opts
*/
failProcess: function (response, opts) {
var status = response.status;
var returnObj = JSON.parse(response.responseText);
if (status >= 400 && status < 500) {
Ext.Msg.alert('提示:', '您填写的字段格式不正确。');
console.info("status code:", status, "return data:", returnObj);
}
if (status >= 500 && status < 600) {
Ext.Msg.alert('提示:', '服务器错误。');
console.info("status code:", status, "return data:", returnObj);
}
;
},
/**
* 请求成功时的默认处理
* @param response
* @param otps
*/
successProcess: function (response, otps) {
console.info("请求成功,返回数据为:", response);
}
});
2、使用
(1)在视图里引入类
requires: [
'Mine.util.Ajax'
]
(2)在对应的控制器里实例化并使用:
ajax: Ext.create({
xtype: 'vcajax'
}),
createActivity: function (button) {//
var domElements = Ext.getDom(button.up('window').down('form').getEl());
var sendData = Ext.dom.Element.serializeForm(domElements);
this.ajax.Ajax({
url: '/api/xyz',
if_serialize: false,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: sendData,
success: this.createActivitySuccess.bind(this)
});
},