聊一聊Javascript中的Promise对象-优快云博客

是什么

先直接上图，打印一下Promise对象，观察下Promise是什么

1console.dir(Promise)
复制代码

Promise对象

可以知道，Promise是一个构造函数，有着reject、resolve函数。prototype有then、catch等方法，说明了只要是Promise对象都会有这两个方法。

Promise构造函数是传入一个函数

怎么用

1var promise = new Promise((resolve, reject) => {
2    setTimeout(function () {
3        console.log('执行完成');
4        resolve('随便什么数据');
5    }, 2000);
6});
7
8result:
9执行完成
复制代码

传入的函数有两个参数：resolve、reject，分别表示异步操作执行成功后的回调函数和异步操作失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确，按照标准来讲，resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。不过在我们开始阶段可以先这么理解，后面再细究概念。

运行以上代码，发现promise并没有调用，只是new了一个Promise，对应的传入函数的代码就已经执行了。因此，我们通常都是把Promise包在一个函数中，在需要的时候才去运行这个函数，如：

 1function f() {
 2    var promise = new Promise((resolve, reject) => {
 3        setTimeout(function () {
 4            console.log('执行完成');
 5            resolve('随便什么数据');
 6        }, 2000);
 7    });
 8    return promise
 9}
10
11f()
12
13result:
14执行完成
复制代码

这时引出两个问题。为什么需要大费周章的包装这样的一个函数？resolve有什么用？

为什么需要引入

1f().then(function(data){
2    console.log(data);
3    //后面可以用传过来的数据做些其他操作
4    //......
5});
复制代码

在f()的返回上可以直接调用then方法，then接收一个参数，是函数，并且会拿到我们在f中调用resolve时传入的参数。运行这段代码，会在2秒后输出“执行完成”，紧接着输出“随便什么数据”。

这时，我们恍然大悟了，原来then调用的function相当于我们之前写的回调函数，相当于是这种形式：

 1function runAsync(callback){
 2    setTimeout(function(){
 3        console.log('执行完成');
 4        callback('随便什么数据');
 5    }, 2000);
 6}
 7
 8runAsync(function(data){
 9    console.log(data);
10});
复制代码

那使用Promise有什么好处呢？我们不妨考虑一个问题，如果callback函数也是一个异步操作，而且执行完后也需要有相应的回调函数，可能会变成 runAsync(function(data,function(data){}){…..})。看起来十分丑陋，假如使用Promise代码就不会这么丑陋了~

Promise的优势在于，可以在then方法中继续写Promise对象并返回，然后继续调用then来进行回调操作。

链式操作的用法

所以，从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的：

 1runAsync1()
 2.then(function(data){
 3    console.log(data);
 4    return runAsync2();
 5})
 6.then(function(data){
 7    console.log(data);
 8    return runAsync3();
 9})
10.then(function(data){
11    console.log(data);
12});
13
14
15function runAsync1(){
16    var p = new Promise(function(resolve, reject){
17        //做一些异步操作
18        setTimeout(function(){
19            console.log('异步任务1执行完成');
20            resolve('随便什么数据1');
21        }, 1000);
22    });
23    return p;            
24}
25function runAsync2(){
26    var p = new Promise(function(resolve, reject){
27        //做一些异步操作
28        setTimeout(function(){
29            console.log('异步任务2执行完成');
30            resolve('随便什么数据2');
31        }, 2000);
32    });
33    return p;            
34}
35function runAsync3(){
36    var p = new Promise(function(resolve, reject){
37        //做一些异步操作
38        setTimeout(function(){
39            console.log('异步任务3执行完成');
40            resolve('随便什么数据3');
41        }, 2000);
42    });
43    return p;            
44}
45
46result:
47异步任务1执行完成
48随便什么数据1
49异步任务2执行完成
50随便什么数据2
51异步任务3执行完成
52随便什么数据3
复制代码

我们可以通过链式编程避免了包含多函数回调的情况，当然并不是都需要return Promise对象，你也可以返回其他数据类型，在后面的then中就能直接直接接收到数据了，比如：

 1runAsync1()
 2.then(function(data){
 3    console.log(data);
 4    return runAsync2();
 5})
 6.then(function(data){
 7    console.log(data);
 8    return '直接返回数据';  //这里直接返回数据
 9})
10.then(function(data){
11    console.log(data);
12});
13
14result:
15异步任务1执行完成
16随便什么数据1
17异步任务2执行完成
18随便什么数据2
19直接返回数据
复制代码

reject用法

前面我们一直都是使用resolve函数，并没有使用reject函数。resolve函数是表示了“执行成功”的回调，reject函数表示“执行失败”的函数。

 1function runAsync1() {
 2    var p = new Promise(function (resolve, reject) {
 3        //做一些异步操作
 4        setTimeout(function () {
 5            console.log('异步任务1执行完成');
 6            // resolve('随便什么数据1');
 7            reject("error")
 8        }, 1000);
 9    });
10    return p;
11}
12
13runAsync1().then((data) => {
14    console.log('resolve');
15    console.log(data)
16}, (error, data) => {
17    console.log('rejected');
18    console.log(error)
19})
20
21result:
22异步任务1执行完成
23rejected
24error
复制代码

需要注意的是，只要执行reject或者resolve，后面的就不会执行了，如：

 1function runAsync1() {
 2    var p = new Promise(function (resolve, reject) {
 3        //做一些异步操作
 4        setTimeout(function () {
 5            console.log('异步任务1执行完成');
 6            resolve('随便什么数据1');
 7            reject("error")
 8        }, 1000);
 9    });
10    return p;
11}
复制代码

因为resolve在reject的前面，所以只会执行resolve，不会执行reject。