js中的异步编程

为什么要异步编程？
1、js的单线程
2、避免UI渲染和ajax请求造成页面停滞状态
3、更好的利用资源

异步编程的主要解决方案

1、发布/订阅模式
2、Promise
3、流程控制

发布/订阅模式

订阅者订阅消息，当发布者监听的对象发生变化时，就把变化的消息通知订阅者，一个最简单的发布订阅模式由一个数组对象，订阅方法和发布方法组成。
数组储存订阅对象以及其回调函数，订阅方法，将订阅者添加到数组中，发布方法，遍历循环数组中每一个元素，并调用注册时所提供的方法

发布者对象

• callbackList：数组，存储订阅者；
• subscribe()：订阅，将订阅者添加到回调数组中；
• unsubscribe()：取消订阅。从数组中删除订阅者；
• publish()：循环遍历数组中的每一个元素，并且调用它们注册时所提供的方法；

一个简单例子：

var PubSub = {  
    subscribe: function (ev, cb) {  // 增加订阅者
        var calls = this._cbs || (this._cbs = {});  
        (this._cbs[ev] || (this._cbs[ev] = [])).push(cb);  
        return this;  
    },  
    publish: function () {  // 发布消息
        var args = [].slice.call(arguments, 0);  
        var ev = args.shift();  

        var list, calls, i, l;  
        if (!(calls = this._cbs)) return this;  
        if (!(list = this._cbs[ev])) return this;  

        for (i = 0, l = list.length; i < l; i++) {  
            list[i].apply(this, args);  
        }  
        return this;  
    }  
}; 

PubSub.subscribe('msg', function (data) {  
    console.log(data);  
});  
  
PubSub.publish('msg',  'this is msg'); 

浏览器常见的事件监听，也是一种发布订阅模式

Promise

Promise是一种异步编程模型，通过一组API来规范化异步操作，这样也能够让异步操作的流程控制更加容易。
规范如下：

• 一个Promise可能有三种状态：等待（pending），已完成（fulfilled），已拒绝（rejected）
• 一个Promise的状态转化只能从“等待”赚到“完成”或“拒绝”，不能逆向，同时“完成”和“拒绝”不能互相转化
• Promise必须实现then方法，而且then必须返回一个Promise
• 同一个Promise的then可以调用多次，并且回调的执行顺序跟它们被定义时的顺序一致
• then方法接受两个参数，第一个参数是成功时（即“等待”转为“完成”）的回调，第二个参数是失败回调（“等待”转为“拒绝”）
  一个简单例子：

function Promise(fn) {
    var value = null,
        callbacks = [];  //callbacks为数组，因为可能同时有很多个回调

    this.then = function (onFulfilled) {
        callbacks.push(onFulfilled);
    };

    function resolve(value) {
        callbacks.forEach(function (callback) {
            callback(value);
        });
    }

    fn(resolve);
}

目前ES6中已经实现Promise方法：ES6中的Promise对象

流程控制

1、尾触发与next：手动调用执行后续操作，常见关键字next
2、async：异步流程控制，处理异步各种协作模式，ES6中的async 函数
3、其他流程控制库，async，step，wind等