jquery的promise处理嵌套请求

来源：互联网发布：股票交易软件手机版编辑：程序博客网时间：2024/06/04 17:42

之前因为没有了解过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的实现，再跟进。。。。。

0 0