熟练使用使用jQuery Promise (Deferred)

1. 情景再现

以前用nodejs写后端程序时,遇到Promise这个概念,这个东西好呀!不用谢一层一层回调,直接用类似于jQuery的连缀方式。后来遇到bluebird这个库,它就是Promise库中很有名的。我希望可以把Promise用在前端的ajax请求上,但是我不想又引入bluebird。后来发现,jquery本身就具有类似于Promise的东西。于是我就jquery的Promise写一些异步请求。

2. 不堪回首

看看一看我以前写异步请求的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 函数定义
function sendRequest(req,successCallback,errorCallback){
$.ajax({
...
...
success:function(res){
successCallback(res);
},
error:function(res){
errorCallback(res);
}
});
}

// 函数调用,这个函数的匿名函数写的时候很容易出错,而且有时候难以理解
sendRequest(req,function(res){
//请求成功
...
},function(res){
//请求失败
...
});

3. 面朝大海

下面是我希望的异步调用方式

1
2
3
4
5
6
7
8
9
sendRequest(req)
.done(function(res){
//请求成功
...
})
.fail(function(req){
//请求失败
...
});

4. 废话少说,放‘码’过来

talk is cheap, show me the code

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
// 最底层的发送异步请求,做成Promise的形式

App.addMethod('_sendRequest',function(path,method,payload){
var dfd = $.Deferred();
$.ajax({
url:path,
type:method || "get",
headers:{
sessionId:session.id || ''
},
data:JSON.stringify(payload),
dataType:"json",
contentType : 'application/json; charset=UTF-8',
success:function(data){
dfd.resolve(data);
},
error:function(data){
dfd.reject(data);
}
});
return dfd.promise();
});

//根据callId查询录音文件,不仅仅是异步请求可以做成Promise形式,任何函数都可以做成Promise形式
App.addMethod('_getRecordingsByCallId',function(callId){
var dfd = $.Deferred(),
path = '/api/tenantcalls/'+callId+'/recordings';

App._sendRequest(path)
.done(function(res){dfd.resolve(res);})
.fail(function(res){dfd.reject(res);});

return dfd.promise();
});

// 获取录音
App.addMethod('getCallDetailRecordings',function(callId){
App._getRecordingsByCallId(callId)
.done(function(res){
// 获取结果后渲染数据
App.renderRecording(res);
})
.fail(function(res){
App.error(res);
});
});

5. 注意事项

  • jQuery的Promise主要是用了jQquery的$.Derferred()方法,一些老版本的jquery并不支持此方法。
  • jQuery版本必须大于等于1.5,推荐使用1.11.3

6. 参考文献

7. 最后

以上文章仅供参考,不包完全正确。欢迎评论,3q。