八段代码理解Promise

发表于 | 分类于 | 阅读次数

Promise的立即执行性

1
2
3
4
5
6
7
8
9
10
let p = new Promise((resolve,reject)=>{
  console.log("create a promise");
  resolve("success");
});
console.log("after new Promise");
p.then((value)=>{
  console.log(value);
});

控制台输出

1
2
3
create a promise
after new Promise
success

Promise对象表示未来某个将要发生的事件，但在创建（new）Promise时，作为Promise参数传入的函数是会被立即执行的，只是其中执行的代码可以是异步代码。有些同学会认为，当Promise对象调用then方法时，Promise接收的函数才会执行，这是错误的。因此，代码中”create a promise”先于”after new Promise”输出。

Promise三种状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
let p1 = new Promise((resolve,reject)=>{
  resolve(1);
});
let p2 = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve(2);
  },500)
});
let p3 = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    reject(3);
  },500)
});
console.log(p1);   //Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 1}
console.log(p2);   //Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
console.log(p3);   //Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
setTimeout(()=>{
  console.log(p2);    //Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 2}
},1000);
setTimeout(()=>{
  console.log(p3)     //Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: 3}
},1000);
p1.then(value=>{
  console.log(value);    //1
});
p2.then(value=>{
  console.log(value);    //2
});
p3.catch(err=>{
  console.log(err)       //3
});

控制台输出

1
2
3
4
5
6
7
8
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 1}
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
1
2
3
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 2}
Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: 3}

Promise的内部实现是一个状态机。Promise有三种状态：pending、resolved、rejected。当Promise刚创建完成时，处于pending状态；当Promise中的函数参数执行了resolve后，Promise由pending状态变成resolved状态；如果在Promise的函数参数中执行的不是resolve方法，而是reject方法，那么Promise会由pending状态变成rejected状态。

p2/p3刚创建完成时，控制台输出的这两台Promise都处于pending状态，但为什么p1是resolved状态呢？这是因为p1的函数参数中执行的是一段同步代码，Promise刚创年完成，resolve方法就已经被调用了，因而紧跟着的输出显示p1是resolved状态。我们通过两个setTimeout函数，延迟1s后再次输出p2、p3的状态，此时p2、p3已经执行完成，状态分别变成resolved和rejected。

Promise状态的不可逆性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let p1 = new Promise((resolve,reject)=>{
  resolve("success1");
  resolve("success2");
});
let p2 = new Promise((resolve,reject)=>{
  resolve("success");
  reject("reject");
});
p1.then(value=>{
  console.log(value);
});
p2.then(value=>{
  console.log(value);
});

控制台输出

1
2
success1
success

Promise状态一旦变成resolve或rejected时，Promise的状态和值就固定下来了，不论你后续再怎么调用resolve或reject方法，都不能改变它的状态和值。因此，p1中resolve(“success2”)并不能将p1的值更改为success2，p2中reject(“reject”)也不能将p2的状态由resolved改变为rejected。

链式调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let p = new Promise((resolve,reject)=>{
  resolve(1);
});
p.then(value=>{             //第一个then
  console.log(value);       //1
  return value * 2;
}).then(value=>{            //第二个then
  console.log(value);       //2
}).then(value=>{            //第三个then
  console.log(value);       //undefined
  return Promise.resolve('resolve')
}).then(value=>{            //第四个then
  console.log(value);       //'resolve'
  return Promise.reject('reject')
}).then(value=>{            //第五个then
  console.log('resolve:' + value)
},err=>{
  console.log('reject:' + err);  //'reject:reject'
});

控制台输出：

1
2
3
4
5
1
2
undefined
resolve
reject:reject

Promise对象的then方法返回一个新的Promise对象，因此可以通过链式调用then方法。then方法接收两个函数作为参数，第一个参数是Promise执行成功时的回调，第二个参数是Promise执行失败时的回调。两个函数只会有一个被调用，函数的返回值将被用作创建then返回的Promise对象。这两个参数的返回值可以是以下三种情况中的一种：

  • return 一个同步的值 ，或者 undefined（当没有返回一个有效值时，默认返回undefined），then方法将返回一个resolved状态的Promise对象，Promise对象的值就是这个返回值。
  • return 另一个 Promise，then方法将根据这个Promise的状态和值创建一个新的Promise对象返回。
  • throw 一个同步异常，then方法将返回一个rejected状态的Promise, 值是该异常。

根据以上分析，代码中第一个then会返回一个值为2（1*2），状态为resolved的Promise对象，于是第二个then输出的值是2。第二个then中没有返回值，因此将返回默认的undefined，于是在第三个then中输出undefined。第三个then和第四个then中分别返回一个状态是resolved的Promise和一个状态是rejected的Promise，依次由第四个then中成功的回调函数和第五个then中失败的回调函数处理。

Promise then()回调异步性

1
2
3
4
5
6
7
8
9
let p = new Promise((resolve,reject)=>{
  resolve("success")
});
p.then(value=>{
  console.log(value);
});
console.log("which one is called first?");

控制台输出：

1
2
which one is called first?
success

Promise接收的函数参数是同步执行的，但then方法中的回调函数执行则是异步的，因此，”success”会在后面输出。

Promise中的异常

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
let p1 = new Promise((resolve,reject)=>{
  foo.bar();
  resolve(1);
});
p1.then((value)=>{
  console.log('p1 then value:' + value);   //
},(err)=>{
  console.log('p1 then err:' + err);
}).then((value)=>{
  console.log('p1 then then value:' + value);
},(err)=>{
  console.log('p1 then then err:' + err);
});
let p2 = new Promise((resolve,reject)=>{
  resolve(2);
});
p2.then((value)=>{
  console.log('p2 then value:' + value);
  foo.bar();
},(err)=>{
  console.log('p2 then err:' + err);
}).then((value)=>{
  console.log('p2 then then value:' + value);
},(err)=>{
  console.log('p2 then then err:' + err);
  return 1;
}).then((value)=>{
  console.log('p2 then then then value:' + value);
},(err)=>{
  console.log('p2 then then then err:' + err);
});

控制台输出：

1
2
3
4
5
p1 then err:ReferenceError: foo is not defined
p2 then value:2
p1 then then value:undefined
p2 then then err:ReferenceError: foo is not defined
p2 then then then value:1

Promise中的异常由then参数中第二个回调函数（Promise执行失败的回调）处理，异常信息将作为Promise的值。异常一旦得到处理，then返回的后续Promise对象将恢复正常，并会被Promise执行成功的回调函数处理。另外，需要注意p1、p2 多级then的回调函数是交替执行的 ，这正是由Promise then回调的异步性决定的。

Promise.resolve()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let p1 = Promise.resolve(1);
let p2 = Promise.resolve(p1);
let p3 = new Promise((resolve,reject)=>{
  resolve(1);
});
let p4 = new Promise((resolve,reject)=>{
  resolve(p1);
});
console.log(p1 === p2);
console.log(p1 === p3);
console.log(p1 === p4);
console.log(p3 === p4);
p4.then((value)=>{
  console.log('p4=' + value);
});
p2.then((value)=>{
  console.log('p2=' + value);
});
p1.then((value)=>{
  console.log('p1=' + value);
});

控制台输出(node v8.2.1)

1
2
3
4
5
6
7
true
false
false
false
p4=1
p2=1
p1=

在Chrome或Safari的控制台里

1
2
3
4
5
6
7
true
false
false
false
p2=1
p1=1
p4=1

Promise.resolve(...)可以接受一个值或者一个Promise对象作为参数。

  • 当参数是普通值时，它返回一个resolved状态的Promise对象，对象的值就是这个参数；
  • 当参数是一个Promise对象时，它直接返回这个Promise参数。

因此，p1 === p2。但通过new的方式创建的Promise对象都是一个新的对象，因此后面的三个比较结果都是false。另外，为什么p4的then最先调用，但在控制台上是最后输出结果的呢？因为p4的resolve中接收的参数是一个Promise对象p1，resolve会对p1“拆箱”，获取p1的状态和值，但这个过程是异步的。

resolve vs reject

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let p1 = new Promise((resolve, reject) => {
  resolve(Promise.resolve("resolve"));
});
let p2 = new Promise((resolve, reject) => {
  resolve(Promise.reject("reject"));
});
let p3 = new Promise((resolve, reject) => {
  reject(Promise.resolve("resolve"));
});
p1.then(value => {
  console.log("fulfilled:" + value);     //fulfilled:resolve
}, err => {
  console.log("rejected:" + err)
});
p2.then(value => {
  console.log("fulfilled:" + value);
}, err =>{
  console.log("rejected:" + err);       //rejected: reject
});
p3.then(value => {
  console.log("fulfilled:" + value);
}, err =>{
  console.log("rejected:" + err);       //rejected:[object Promise]
});

控制台输出：

1
2
3
rejected:[object Promise]
fulfilled:resolve
rejected:reject

Promise回调函数中的第一个参数resolve，会对Promise执行“拆箱”动作。即当resolve的参数是一个Promise对象时，resolve会“拆箱”获取这个Promise对象的状态和值，但这个过程是异步的。p1“拆箱”后，获取到Promise对象的状态时resolved，因此fulfilled回调被执行；p2”拆箱“后，获取到Promise对象的状态是rejected，因此rejected回调被执行。但Promise回到函数中的第二个参数reject不具备”拆箱“的能力，reject的参数会直接传递给then方法中的rejected回调。因此，即使p3reject接受了一个resolveed状态的Promise，then方法中被调用的依然是rejected,并且参数就是reject接收到的Promise对象。

参考地址：

https://juejin.im/post/597724c26fb9a06bb75260e8?utm_source=gold_browser_extension

本文结束，感谢阅读。

本文作者： 苍山沭河
本文链接：https://melodyvoid.github.io/JavaScript/eight-sections-of-code-understanding-promise.html
欢迎转载，转载请注明文本链接

坚持原创技术分享，您的支持将鼓励我继续创作！