js异步回调之Promise

先上一个大家比较熟悉的例子&＃xff1b;
以前我们写jquery ajax请求的时候&＃xff0c;都是这样写&＃xff1a;

$.ajax({url: "test.json",success: function(){alert("hello world&＃xff01;");},error:function(){alert("error");}});


后来呢在jquery1.7版本后&＃xff0c;我们开始这样写&＃xff1a;

$.ajax("test.json").done(function(){ alert("hello world&＃xff01;"); }).fail(function(){ alert("error"); });


很明显&＃xff0c;更改后的代码更易懂易读了。
这个是jquery的deferred对象&＃xff0c;jquery deferred对象就是jQuery对Promises的实现&＃xff0c;还其他有很多实现了promises的库供开发者可用。 像微软的 WinJS.Promise, when.js, q, 和dojo.Deferred&＃xff0c;它们暴露的都是deferred对象。Promise也已经纳入了ES6&＃xff0c;对于jQuery实现Promises我们暂时就不讲了&＃xff0c;今天的目的是Promise。

那Promise到底是怎么回事呢&＃xff1f;

其实呢&＃xff0c;Promise就是一个对象&＃xff0c;它是用来实现异步操作的&＃xff0c;它可以让异步代码书写起来更优雅&＃xff0c;更便于阅读。

Promise的特性&＃xff1a;
1、Promise对象有三种状态&＃xff1a;Pending&＃xff08;进行中&＃xff09;、Resolved&＃xff08;已完成&＃xff0c;又称 Fulfilled&＃xff09;和 Rejected&＃xff08;已失败&＃xff09;&＃xff0c;只有异步操作结果可以改变当前状态&＃xff0c;其他操作不能改变状态&＃xff0c;Promise对象的状态只能从“进行中”改为“已完成”或者从“进行中”改为“失败”。

2、Promise对象的then方法&＃xff0c;就是用来指定回调函数。一旦非同步操作完成&＃xff0c;就调用指定的回调函数&＃xff0c;并总是返回一个promise对象&＃xff0c;方便链式调用。而且同一个promise的then可以调用多次。

3、then方法接受两个回调函数作为参数&＃xff0c;第一个参数是成功Resolved时的回调&＃xff0c;第二个是失败Reject时的回调。第二个参数是可以选的&＃xff0c;同时&＃xff0c;then可以接受另一个promise传入&＃xff0c;也接受一个“类then”的对象或方法&＃xff0c;即thenable对象。
我们现在用promise来组织一下代码。

var sleep &＃61; function (time) {return new Promise(function (resolve, reject) {console.log(&＃39;test123&＃39;);setTimeout(function () {resolve(&＃39;test&＃39;);}, time);})
};
(function(){console.log(&＃39;start&＃39;);sleep(3000).then(function(data){console.log(data);return sleep(5000);}).then(function(data){console.log(data);console.log(&＃39;end&＃39;);})
})();

上面代码中&＃xff0c;sleep方法返回一个Promise实例&＃xff0c;表示一段时间以后才会发生的结果。首先输出‘start’,然后&＃xff0c;sleep执行后&＃xff0c;3秒后返回“test”&＃xff0c;触发then方法绑定的回调函数&＃xff0c;输出回调返回值“test”,又return sleep(5000),这样第一个then的返回值&＃xff0c;就是第二个的参数&＃xff0c;再次执行sleep&＃xff0c;5秒后返回‘test’&＃xff0c;输出‘test’、&＃39;end&＃39;;

好像没有什么大不了的&＃xff0c;promises的真正强大之处在于多重的链接&＃xff0c;在异步执行的流程中&＃xff0c;把执行代码和处理结果的代码清晰地分离了&＃xff1a;它有个缺点就是链过长以后&＃xff0c;满屏幕的then&＃xff0c;傻傻分不清业务到底干啥了&＃xff0c;

Promise的 api

1、Promise.resolve()
2、Promise.reject()
3、Promise.prototype.then()
4、Promise.prototype.catch()
5、Promise.all() // 所有的都有完成&＃xff0c;相当于 且
6、Promise.race() // 完成一个即可&＃xff0c;相当于 或

1、Promise.resolve()的作用将现有对象转为Promise对象resolvedl;
Promise.resolve(&＃39;test&＃39;)&＃61;&＃61;new Promise(resolve&＃61;>resolve(&＃39;test&＃39;))
2、Promise.reject()也是返回一个Promise对象,状态为rejected&＃xff1b;

let p&＃61;Promise.reject(&＃39;error&＃39;) &＃61;&＃61; let p&＃61;new Promise((resolve,reject)&＃61;>reject(&＃39;error&＃39;));p.catch(data&＃61;>{console.log(data);})

生成一个Promise对象的实例对象p&＃xff0c;抛出错误&＃xff0c;状态就会变为Rejected,调用p.catch&＃xff08;&＃xff09;指定的回调函数。
3、.then()方法&＃xff0c;then方法是定义在原型对象Promise.prototype上的&＃xff0c;作用是为Promise 对象添加回调函数。

let p&＃61;new Promise(resolve&＃61;>resolve(&＃39;hello&＃39;));
p.then((resolve,reject)&＃61;>{console.log(resolve);
}).then(function(){console.log(&＃39;zhangsan&＃39;);
})


then方法的第一个参数是Resolved状态的回调函数&＃xff0c;第二个参数&＃xff08;可选&＃xff09;是Rejected状态的回调函数。 可以使用链式操作&＃xff0c;指定多个then(),依次执行&＃xff0c;上面的代码输出结果&＃xff1a;’hello‘,&＃39;zhangsan&＃39;
4、.catch():发生错误的回调函数&＃xff0c;同样&＃xff0c;catch方法也是定义在原型对象Promise.prototype上的&＃xff0c;事例同Promise.reject()的例子。注&＃xff1a;如果Promise的状态已经变为resolved&＃xff0c;再抛出错误是无效的。

var p &＃61; new Promise(function(resolve, reject) {resolve(&＃39;success&＃39;);reject(&＃39;fail&＃39;);
});
p.then(function(value) { console.log(value) }).catch(function(error) { console.log(error) });

输出结果&＃xff1a;success;
5、Promise.all()的作用是同时执行多个实例&＃xff0c;同步并行&＃xff0c;且所以的实例都返回resolve状态&＃xff0c;Promise才会改变为resolve状态&＃xff0c;其中一个为rejected&＃xff0c;promise的状态就是rejected;
注&＃xff1a;Promise.all 方法的参数可以不是数组&＃xff0c;但是必须是一个Iterator接口对象&＃xff0c;且返回promise实例&＃xff0c;否则报错&＃xff1a;error:TypeError: [object Promise] is not iterable!

let p1 &＃61;new Promise(function(resolve,reject){resolve(1);
});
let p2 &＃61; new Promise(function(resolve,reject){resolve(2);});
let p3 &＃61; new Promise(function(resolve,reject){// reject();resolve(3);});
Promise.all([p1, p2, p3]).then(function (results) {console.log(&＃39;success:&＃39;&＃43;results);
}).catch(function(r){console.log("error");console.log(r);
});


上面代码输出&＃xff1a;success:1,2,3;
把 p3方法改为返回 reject()&＃xff1b;输出结果是&＃xff1a;error;
6、Promise.race()的作用也是同时执行多个实例&＃xff0c;只要有一个实例改变状态&＃xff0c;Promise就改为那个实例所改变的状态&＃xff1b;

let p1 &＃61;new Promise(function(resolve,reject){setTimeout(function(){reject(1);},3000)
});
let p2 &＃61; new Promise(function(resolve,reject){setTimeout(function(){resolve(2);},1000)
});
Promise.race([p1, p2]).then(function (results) {console.log(&＃39;success:&＃39;&＃43;results);
}).catch(function(results){console.log("error:"&＃43;results);
});
输出:success: 2;

上面代码p2首先执行完毕&＃xff0c;改变状态为resolve&＃xff0c;所以promise的状态被改为resolve;
我们把p1的时间改为1000&＃xff0c;p2改为3000&＃xff0c;也就是说p1先执行完毕&＃xff0c;promise的状态也被改变为reject&＃xff0c;输出&＃xff1a;error:1

如果想深入学习&＃xff0c;可以看一下阮一峰的《ES 6标准入门》的Promise部分http://es6.ruanyifeng.com/#do...&＃xff0c;很详细的。