27：异步程序的处理

一、Promise用来解决什么问题

1. 什么是异步程序

  1. 客户端
    • 计时器
    • ajax
  2. 服务端（Node.js）
    • fs文件操作
    • 数据库操作

2. 什么异步

1
2
3
4
5
6
7
8
9
10
11
setTimeout(function(){
  console.log("异步请求1");
}, Math.round(Math.random()*1000));

setTimeout(function(){
  console.log("异步请求2");
}, Math.round(Math.random()*1000));

setTimeout(function(){
  console.log("异步请求3");
}, Math.round(Math.random()*1000));

3. 什么是回调地狱

- 回调函数嵌套调用，根据外层异步程序执行结果，调用内层异步程序

1
2
3
4
5
6
7
8
9
10
11
12
13
setTimeout(function(){
  console.log("异步程序1");

  setTimeout(function(){
    console.log("异步请求2");

    setTimeout(function(){
      console.log("异步请求3");
    }, Math.round(Math.random()*1000));

  }, Math.round(Math.random()*1000));

}, Math.round(Math.random()*1000));
- 回调地狱的缺点：代码可读性低，不利于查错，异常处理机制较差，浪费性能

3. 使用Promise优化回调地狱

  1. Promise的简单说明
  2. 使用Promise优化回调地狱
    • Promise的链式调用可以很好的解决回调地狱问题
1
2
3
4
5
6
7
asyncFunc1().then(response => {
  return asyncFunc2();
}).then(response => {
  return asyncFunc3();
}).then(response => {
  // 所有异步完成后的其他操作
})
  1. 使用Promise之后的优势
    • 方便阅读
    • 查错方便
    • 状态管理
    • …

二、Promise的使用

1. Promise的基本状态

  1. 三种状态的含义和特点
    1. pending：正在进行时…
    2. fulfilled：完成
    3. rejected：失败

2. Promise的基本语法

创建Promise实例，立即传入回调函数

1
2
3
4
5
new Promise((resolve, reject)=>{
  console.log("正在进行时");
  resolve("已完成")
  reject("已失败")
})

3. Promise实例的方法

  1. promise.then()
    • promise实例状态为成功时执行
    • 参数：回调函数；回调1用来处理成功状态，回调2用来处理失败状态，回调2可选
    • 返回值：当前promise实例状态对应的回调函数的返回值，这个返回值必然是一个新的Promise实例，哪怕主动返回的不是Promise实例，也会被处理成Promise实例
  2. promise.catch()
    • promise实例状态为失败时执行
    • 参数：回调函数，用来处理失败状态
    • 返回值：回调函数的返回值
  3. promise.finally()
    • promise实例状态为成功或失败时都会执行，表示当前promise结束了
    • 参数：回调函数，用来处理结束后的状态
    • 返回值：回调函数的返回值

4. 使用Promise实例的方法优化回调地狱问题

  1. 场景描述
  2. 解决方式：链式回调
  3. 总结

5. Promise类的方法

  1. Promise.resolve()
    • 返回一个成功状态的Promise实例
    • 参数：成功状态下的数据
  2. Promise.reject()
    • 返回一个失败状态的Promise实例
    • 参数：失败状态下的数据
  3. Promise.all()
    • 用于将多个 Promise 实例，包装成一个新的 Promise 实例。
    • Promise.all()全部子实例都成功才算成功，只要有一个子实例失败就算失败。
    • 参数：多个Promise实例的数组
  4. Promise.any()
    • 用于将多个 Promise 实例，包装成一个新的 Promise 实例。
    • Promise.any()只要有一个子实例成功就算成功，所有子实例失败才算失败。
    • 参数：多个Promise实例的数组
  5. Promise.race()
    • 用于将多个 Promise 实例，包装成一个新的 Promise 实例。
    • Promise.race()赛跑机制，取决于最先执行结束的子实例的状态
    • 参数：多个Promise实例的数组
  6. Promise.allSettled()
    • 用于将多个 Promise 实例，包装成一个新的 Promise 实例。
    • Promise.allSettled()所有子实例结束，新实例才会完成，包含所有子实例的状态
    • 参数：多个Promise实例的数组

三、Promise案例

四、异步的终极解决方案：Async / Await

  1. async关键字，在函数的function关键字之前使用，用于表示当前函数是一个异步函数，且函数执行结果自动返回一个成功状态的Promise实例，这个异步函数内的return关键字用于给这个成功状态的Promise实例返回成功时的数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
async function fn1(){}

console.log(fn1());		// Promise {<fulfilled>: undefined}

async function fn2(){
    return "hello";
}

console.log(fn2());		// Promise {<fulfilled>: 'hello'}

fn2().then(res=>{
    console.log(res);		// hello
})
  1. await关键字只能在async声明的异步函数中使用，表示等待。等待一个异步执行结束并返回成功状态时的数据。await可以将异步的函数同步执行，await一般用于等待Promise的状态
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
async function fn(){
    const res = await test();
    console.log(res);		// success
}

function test(){
    return new Promise((resolve, reject)=>{
        setTimeout(function(){
            resolve("success");
        },Math.random()*1000)
      
        setTimeout(function(){
            reject("error");
        },Math.random()*2000)
    })
}