聊聊 Promise

发表于

定义

Promise 是一个对象，用于提供一个未来值，这个值可能是成功值，也可能是失败值。

A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it’s not resolved.

三种状态

Pending
initial state, not fulfilled or rejected.
pending 状态就相当于 http 请求正在等待服务器返回结果一样，可能是等待成功，也可能是失败

Fulfilled
the operation completed successfully.
Fulfilled 状态表示 promise 返回了一个成功值，即 resolve 值

Rejected
the operation failed.
Rejected 状态表示 promise 返回了一个失败值，即 reject 值

简单实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const say = new Promise((resolve, reject) => {
  setTimeout(() => {
      if (true) {
        resolve('yes');
      } else {
        reject('no');
      }
  }, 2000);
});

console.log('begin');

say.then(
  res => console.log(res),
  err => console.log(err)
);

console.log('end');

嵌套 (Chaining)

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
const greet = new Promise((resolve, reject) => {
  setTimeout(() => {
      if (true) {
        resolve('hello');
      } else {
        reject('no welcome');
      }
  }, 2000);
});

const toSb = greet => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${greet} to sb`);
    }, 1000);
  });
}

greet.then(
  greet => toSb(greet)
).then(
  res => console.log(res)
)
.catch(
  err => console.log(err)
);

Something Important

错误处理在 promise 中有两种

  1. Promise.prototype.catch(onRejected)
  2. Promise.prototype.then(onFulfilled, onRejected)

因为 .then() 总是返回一个 new promise，所以如果在 then 中处理 onRejected，那么在 promise 嵌套时，第二个 .then() 中的代码总会被执行，在这个例子中就会输出 undefined 

1
2
3
4
5
6
7
8
9
greet.then(
  greet => toSb(greet),
  greetErr => console.log(greetTxt) //if promise is rejected
).then(
  res => console.log(res)  // here will always print undefined
)
.catch(
  err => console.log(err)
);

个人推荐使用 .catch() 处理 onRejected

多个 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
const p1 = new Promise((resolve, reject) => { 
  setTimeout(
	() => resolve(1000),
	1000
  ); 
}); 
const p2 = new Promise((resolve, reject) => { 
  setTimeout(
	() => reject(2000),
	2000
  ); 
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(
	() => resolve(3000),
	3000
  ); 
});

// 2s to reject the promise
Promise.all([p1, p2, p3]).then(values => { 
  console.log(values);
}).catch(reason => { 
  console.log(reason)
});

所有的 promise 成功 resolve 后，则 Promise.all 也成功 resolve
只要有一个 promise 被 reject，则 Promise.all 返回的新 promise 也被 reject
Promise.all reject 的值为第一个被 reject 的 promise 的值

结合 async & await (example)

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
const p1 = new Promise((resolve, reject) => { 
  setTimeout(
	() => resolve(1000),
	1000
  ); 
}); 

const p2 = new Promise((resolve, reject) => { 
  setTimeout(
	() => resolve(2000),
	2000
  ); 
});

const p3 = new Promise((resolve, reject) => {
  setTimeout(
	() => reject(3000),
	3000
  ); 
});

async function allPromise() {
	const result = await Promise.all([p1, p2, p3]);
	return result;
}

allPromise().then(
	res => console.log(res)
).catch(
	err => console.log(err) //3000
)

掌握Promise