Ajax的懒人姿势

前端
评论

jq的ajax是个好东西，之前每次是这么写的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.xhrCtrl = {};
var doAjax = function () {
	if (xhr.doAjax){
		// 重复点击控制
		return false 
	}
	//按钮控制
	$("#theButton").prop('disabled', true);
	
	xhr.doAjax = true;	
	$.ajax({
		url: url
	    type: "post",
	    dataType: "json",
	    data: postData
	}).done(function(data) {
	    // Ajax 调用成功执行
	    // do something
	}).fail(function(err) {
	    // Ajax 调用失败执行
	    console.log('Fail!');
	}).always(function() {
	    // 不管成功与否，都会执行
    	xhr.doAjax = null;
   		$("#theButton").prop('disabled', false);
	});
}

写多了就发现，其实业务交互都在.done()里处理，.fail()和.always()看起来都是些重复处理的动作。然后再看异步流程控制时看到了这个！

摘抄出来一段说就是写个公共的ajax方法来让每次ajax都只要处理.done()多酷！！主要用到JQ的异步控制，主角就是Deferred 和 Promise,这两个的关系就是：

  • Deffered 触发 resolve 或 reject
  • Promise 中申明 resolve 或 reject 后应该做什么（回调）

初步改善代码,这里封装在jQuery对象上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
;(function ($) {
    $.extend({
        jax: function (options) {
            var default = {
                data  : {},
                async : true,
                type  : 'post',
                ctrl  : '',
                button: undefined,
                errmsg: '服务器炸了,稍后再试吧 - -||'
            };
            var setting = $.extend(default, options);
			
	    // 提交控制
            if (setting.ctrl) {
                xhrCtrl[setting.ctrl] = true;
            }
            // 按钮控制
            if (setting.button) {
                setting.button.prop('disabled', true);
            }
            // 等待动画
            $('#ajaxLoader').fadeIn(150);
			
	    // 创建一个deferred对象
            var deferred = $.Deferred();
            $.ajax(setting.url, {
                type    : setting.type,
                dataType: 'json',
                async   : setting.async,
                data    : setting.data
            }).done(function (data) {
            	 // 第一个注意点，根据后台灵活调整
                if (data && !data.success) {
                	//假设消息提示为$.toast
                    $.toast(data.msg || "发生了奇异的错误");
                    
                    deferred.reject();
                } else if (data && data.success) {
                	//  成功，传递数据
                    deferred.resolve(data);
                } else {
                    $.toast("oops! 服务器未返回任何数据");
                    
                    deferred.reject();
                }
            }).fail(function () {
                $.toast(setting.errmsg, 'warning');
                
                deferred.reject();
            }).always(function () {
                if (setting.ctrl) {
                    xhrCtrl[setting.ctrl] = null;
                }
                if (setting.button) {
                    setting.button.prop('disabled', false);
                }
                $('#ajaxLoader').fadeOut(150);
            })
            return deferred.promise();
        },
   })
})(jQuery);

调用的话简直干净！！！！！:

1
2
3
4
5
6
7
8
9
10
var doAjax = function () {
	$.jax({
		url   : url,
	    data  : postData,
	    button: $('#button'),
	    ctrl  : 'doAjax'
	}).done(function (data) {
		//do something
	})
}

不过这里有几个注意点，第一个注意点就是需要和后台约定下返回数据中success标识的结构，然后，然后就没有然后了，就是这么简单

笑
世界和平，火锅好吃，再见。