异步编程

javascript异步编程, web2.0时期比较热点的编程体式格局，我们日常平凡码的时刻也或多或少用到，最典范的就是异步ajax，发送异步要求，绑定回调函数，要求相应以后挪用指定的回调函数，没有壅塞其他代码的实行。另有像setTimeout要领一样也是异步实行回调的要领。

假如对异步编程还不太熟悉的话，直接戳阮一峰大牛的教程，这篇文章引见了四种异步编程的体式格局：

• 回调函数
• 事宜监听
• 宣布/定阅
• promise形式

这几种体式格局的可维护性逐级递增，明白难度也逐级递增。这篇总结也是针对promise形式的。

promise形式

那末多中异步编程的体式格局，为何挑选promise, 由于前面几种体式格局不够天真，用起来不够愉快，不文雅。为了下降异步编程的复杂性，所以promise。

promise的中心是有一个promise对象，这个对象有一个主要的then()要领, 它用于指定回调函数，如：

f1().then(f2);

promise形式在任何时刻都有三种状况：已完成（resolved），未完成（unfulfilled），那末then()要领就是为状况变化指定差别的回调函数，并老是返回一个promise对象，轻易链式挪用。

那promise形式下，返回的数据如安在各个回调函数之间流传呢，经由过程resolve要领，你能够将一个函数的返回值作为参数通报给另一个函数，而且将另一个函数的返回值作为参数再通报给下一个函数……像一条“链”一样无穷的这么做下去。

代码完成

经由过程建立一个Promise组织函数来完成promise形式:

//constructor
var Promise = function() {
    this.callbacks = [];
}

Promise.prototype = {
    construct: Promise,
    resolve: function(result) {
        this.complete("resolve", result);
    },

    reject: function(result) {
        this.complete("reject", result);
    },

    complete: function(type, result) {
        while (this.callbacks[0]) {
            this.callbacks.shift()[type](result);
        }
    },

    then: function(successHandler, failedHandler) {
        this.callbacks.push({
            resolve: successHandler,
            reject: failedHandler
        });

        return this;
    }
}

// test
var promise = new Promise();

var delay1 = function() {
    setTimeout(function() {
        promise.resolve('数据1');
    }, 1000);
    return promise;
};

var callback1 = function(re) {

    re = re + '数据2';
    console.log(re);
};

delay1().then(callback1)

代码剖析

我们可看到一个简朴的promise对象的组织函数的构造：

• callbacks: 用于治理回调函数
• resolve: 要求胜利时实行的要领
• reject:要求失利时实行的要领
• complete: 实行回调
• then：绑定回调函数

测试：

var promise = new Promise();

var delay1 = function() {
    setTimeout(function() {
        promise.resolve('数据1');
    }, 1000);
    return promise;
};

var callback1 = function(re) {

    re = re + '数据2';
    console.log(re);
    promise.resolve(re);
};

var callback2 = function(re) {

    console.log(re + '数据3');

};

delay1().then(callback1).then(callback2);

效果：

一秒以后输出：

剖析：

//第一步
var delay1 = function() {
    setTimeout(function() {
        promise.resolve('数据1');
    }, 1000);
    return promise;
};

这个函数经由过程setTimeout要领，异步通报一个数据1，并返回一个promise对象(必需)。

//第二步
var callback1 = function(re) {

    re = re + '数据2';
    console.log(re);
    promise.resolve(re);
};

callback1和callback2都是要经由过程then要领注册的回调函数，个中callback1经由过程resolve要领把数据往下通报。

//第三步
delay1().then(callback1).then(callback2);

delay1()要领实行完，由于返回了一个promise对象，所以能够再挪用then()要领为delay1()的setTimeout异步实行操纵指定回调函数, 又由于then()要领也返回的是promise对象，所以还能够再挪用then要领

    //第四步
    setTimeout(function() {
        promise.resolve('数据1');
    }, 1000);

一秒以后，当其他代码实行完成，最先实行异步代码promise.resolve('数据1');，这里挪用promise的resolve()要领，指定了一个胜利状况，并把数据1作为参数。

    //第五步
    resolve: function(result) {
        this.complete("resolve", result);
    },


    //第六步：轮回实行回调，将上一个回调的效果通报给下一个回调
    complete: function(type, result) {
        while (this.callbacks[0]) {
            this.callbacks.shift()[type](result);
        }
    },

这个中比较难明白的就是第五，六步。

难明白请参考：

Promise/A的误区以及实践
JavaScript异步编程的Promise形式
Javascript异步编程的4种要领