Jiawei Wang's Blog

# promise&async&await

# 什么是promise

  • ES6提出的异步编程解决方案
  • 是一个构造函数，需要new关键字来生成一个promise的实例对象
  • promise的构造函数接受一个函数作为参数，该函数中的代码在new的时候会立即执行。该函数默认存在的两个参数分别是resolve和reject，这俩也是函数（用来标记异步执行的状态）
  • 当异步操作完成，可以调用resolve函数，来标记当前的异步操作已经完成
  • 当异步操作失败，调用reject函数
  • 异步执行状态可以通过promise实例对象的then（异步完成的回调），catch（异步失败的回调）方法接收

# 为什么要有promise

  • 解决地域回调的问题

#

# async/await的概念

  • 让同步代码能够异步执行，是基于Promise的异步解决方案
  • async: 声明异步函数，始终返回promise对象
  • await: 暂停异步函数的执行，获取到Promise对象中的值后才会往下执行

# 案例：实现红绿灯

async function changeColor(color, duration) {
      // 改变颜色
      document.querySelector('.color').style.backgroundColor = color
      // 延迟时间
      await delay(duration)
    }

    function delay(duration) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, duration)
      })
    }

    //主函数
    async function run() {
        await changeColor('red', 3000)
        await changeColor('green', 2000)
        await changeColor('yellow', 1000)
        run()
    }
    run()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

changeColor中的参数是写死的，能否动态实现代码，其他人可复用只需改变配置?

可以用一个map保存数据，思想是只改配置文不改业务逻辑

 
 
 
 
 























const TRAFFIC_LIGHT_CONFIG = {
      'red': 3000,
      'green': 2000,
      'yellow': 10000
    }

    async function changeColor(color) {
      // 改变颜色
      document.querySelector('.color').style.backgroundColor = color
      // 延迟时间
      await delay(TRAFFIC_LIGHT_CONFIG[color])
    }

    function delay(duration) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, duration)
      })
    }

    //主函数
    async function run() {
      for (let key in TRAFFIC_LIGHT_CONFIG) {
        await changeColor(key)
      }
      run()
    }
    run()
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

← typeof&instanceof →