之前因为没有了解过promise,所以当有某个请求依赖于上一个请求的时候,我都是用的嵌套请求,这样代码就会变得很复杂,很不容易读懂,所以今天去了解了一下promise,就将正在写的项目改了一下,用了promise:
一下附上promise处理嵌套请求的用法:
$.getJSON(instance_url + "service="+$('#id_service').val()+"&instance="+$('#id_instance').val()+"&start_time="+timeSwitch($('#id_start_time').val())+"&end_time="+timeSwitch($('#id_end_time').val()))
.then(function(res){
gen_items_tree_instance('#instance_item_tree', res);
return $.getJSON(container_url + res.relations.url_parameters);
},function(jqxhr, textStatus, error){
console.log( "Request Failed: " + textStatus + " " + error);
$('#instance_item_tree').text("查询失败,请重试");
})
.then(function(res){
gen_items_tree_instance('#container_item_tree', res);
return $.getJSON(machine_url + res.relations.url_parameters);
},function(jqxhr, textStatus, error){
console.log( "Request Failed: " + textStatus + " " + error);
$('#container_item_tree').text("查询失败,请重试");
})
.then(function(res){
gen_items_tree_instance('#machine_item_tree', res);
},function(jqxhr, textStatus, error){
console.log( "Request Failed: " + textStatus + " " + error);
$('#machine_item_tree').text("查询失败,请重试");
});
这样代码就比之前看起来顺眼多了。
然后上网了解了一下promise的实现方式,看到某篇博客写的不错,在这里附上链接以及核心代码实现:
http://segmentfault.com/a/1190000000684654
var Promise = function() {
this.doneList = [];
this.failList = [];
this.state = 'pending';
};
Promise.prototype = {
constructor: 'Promise',
resolve: function() {
this.state = 'resolved';
var list = this.doneList;
for(var i = 0, len = list.length; i < len; i++) {
list[0].call(this);
list.shift();
}
},
reject: function() {
this.state = 'rejected';
var list = this.failList;
for(var i = 0, len = list.length; i < len; i++){
list[0].call(this);
list.shift();
}
},
done: function(func) {
if(typeof func === 'function') {
this.doneList.push(func);
}
return this;
},
fail: function(func) {
if(typeof func === 'function') {
this.failList.push(func);
}
return this;
},
then: function(doneFn, failFn) {
this.done(doneFn).fail(failFn);
return this;
},
always: function(fn) {
this.done(fn).fail(fn);
return this;
}
};
function when() {
var p = new Promise();
var success = true;
var len = arguments.length;
for(var i = 0; i < len; i++) {
if(!(arguments[i] instanceof Promise)) {
return false;
}
else {
arguments[i].always(function() {
if(this.state != 'resolved'){
success = false;
}
len--;
if(len == 0) {
success ? p.resolve() : p.reject();
}
});
}
}
return p;
}
但好像es6并未采用这种办法实现,但是思路是很不错的,后续我会继续研究一下es6的实现,再跟进。。。。。