异步编程解决方案 Promise

1. 回调地狱
2. Promise 的使用
3. Promise 的状态
4. Promise 的结果
5. Promise 的 then 方法
6. Promise 的 catch 方法
7. 回调地狱的解决方案

1. 回调地狱

---

回调地狱: 在回调函数中嵌套回调函数

因为 ajax 请求是异步的，所以想要使用上一次请求的结果作为请求参数，所以必须在上一次请求的回调函数中执行下次请求，这种写法非常繁琐，我们亲切的把它称之为 回调地狱

ES6 原生提供了 Promise 对象，Promise 解决了回调地狱的问题

回调地狱代码示例:

1. // 第一次请求
2. $.ajax({
3. url: './login.json',
4. success(res) {
5. // 使用第一次请求的结果发送第二次请求
6. $.ajax({
7. url: './user.json',
8. data: { id: res.id },
9. success(res) {
10. // 使用第二次请求的结果发送第三次请求
11. $.ajax({
12. url: './getUserList.json',
13. data: { where: res.userinfo.name },
14. success(res) {
15. console.log('res', res)
16. }
17. })
18. }
19. })
20. }
21. })

2. Promise 的使用

---

Promise 是一个构造函数，接受一个函数作为参数，通过 new 关键字实例化

1. new Promise((resolve, reject) => { });

查看 Promise 实例的属性

1. const promise = new Promise((resolve, reject) => { });
2. console.dir(promise);

得出 Promise 实例有两个属性: state（状态），result（结果）

3. Promise 的状态

---

Promise 实例的三种状态

1. pending （准备，待解决，进行中）
2. fulfilled（已完成，成功）
3. rejected (已拒绝，失败)

Promise 状态的改变:

通过调用 resolve()，reject() 改变当前 promise 对象的状态，promise 对象的状态改变是一次性的。

1. const promise = new Promise((resolve, reject) => {
2. // 使当前 promise 对象状态改为 fulfilled
3. // resolve()
4. // 使当前 promise 对象状态改为 rejected
5. // reject()
6. });

4. Promise 的结果

---

Promise 实例的另外一个属性 result 的值就是调用 resolve() 或 reject() 的参数

1. const promise = new Promise((resolve, reject) => {
2. resolve({ name: 'liang' })
3. });
4. console.dir(promise);
5. const promise2 = new Promise((resolve, reject) => {
6. reject({ name: 'wang' })
7. });
8. console.dir(promise2);

5. Promise 的 then 方法

---

then 方法是第一个参数在 promise 状态是 fulfilled 执行，第二个参数在 promise 状态是 rejected 执行

then 方法的返回值是一个 promise 对象

1. const p = new Promise((resolve, reject) => {
2. reject({ name: 'liang' })
3. });
4. p.then(res => {
5. // 当 promise 状态是 fulfilled 执行
6. console.log('成功时调用', res)
7. }, reason => {
8. // 当 promise 状态是 rejected 执行
9. console.log('失败时调用', reason)
10. });

在 then 方法中使用 return 可以将 then 方法返回的 promise 实例改为 fulfilled 状态

在 then 方法中，如果代码出错（错误异常），会将返回的 promise 实例状态改为 rejected

1. // 如果 promise 的状态不改变 then 方法无法执行
2. const p = new Promise((resolve, reject) => {
3. resolve()
4. });
5. const t = p.then(res => {
6. console.log('成功时调用', res)
7. // 在 then 方法中使用 return 可以将 then 方法返回的 promise 实例状态改为 fulfilled
8. // return 123
10. // 如果这里的代码出错 会将 t 实例的状态改为 rejected
11. console.log(a);
12. }, reason => {
13. console.log('失败时调用', reason)
14. });
15. t.then(res => {
16. // res 123
17. console.log('t 成功', res)
18. }, reason => {
19. console.log('t 失败', reason)
20. })

6. Promise 的 catch 方法

---

catch 方法参数中的函数执行时机 ？

1. 当 promise 实例状态改为 rejected 时
2. promise 构造函数的参数方法体中有错误发生（其实也是状态变为 rejected ）

1. const p = new Promise((resolve, reject) => {
2. // 下面两种错误都会触发 catch 方法
3. // reject('有错误')
4. // throw new Error('出错了')
5. });
6. p.catch(res => {
7. console.log('res', res)
8. })

catch 方法 和 then 方法的第二个参数都能捕捉到 promise 实例状态改为 rejected 时的情况，那么平时推荐怎么用 ？下面是 Promise 最常见的写法，推荐这么使用

1. const p = new Promise((resolve, reject) => {
2. resolve()
3. // reject()
4. });
5. p.then(res => {
6. console.log('res', res)
7. }).catch(reason => {
8. console.log('reason', reason)
9. })

7. 回调地狱的解决方案

---

回调地狱写法

第一次改造: 使用 Promise

第二次改造: 封装函数

第三次改造: 终极解决方案（使用 async + await）