为什么要异步编程?
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等