async和await使基于Promise的异步操作更简洁方便，Promise是解决回调地狱问题，async和await则是使异步的代码看起来像同步的代码，更容易理解

async和await是什么#

可以声明一个async函数，表示函数里面有异步操作，一般只有在async函数中才能使用await；

await异步等待，表示紧跟在await后面的是异步的，需要等待结果，await需要和async一起使用

基本语法：

1
async function fn() {
2
    const result = await 异步操作(Promise对象)
3
 }

为什么用？使异步操作更简洁方便；使异步代码看起来像同步，更容易理解

使用async 和 await#

实现一个效果，一个广告图片一开始是消失的，然后隔几秒显示，然后又消失

回调函数方式：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Document</title>
7
  <style>
8
    .ad{
9
      display: block;
10
      width: 300px;
11
      height: 150px;
12
      margin: 0 auto;
13
    }
14
    .none{
15
      display: none;
16
    }
17
  </style>
18
</head>
19
<body>
20
  <img src="./ad.jpg" alt="" class="ad none" id="ad">
21
  <script>
22
    //  回调函数
23
    function ad () {
24
      // 获取DOM
25
      const $ad = document.getElementById('ad');
26
      setTimeout(() => {
27
        // 1S后移除
28
        $ad.classList.remove('none')
29
        setTimeout(() => {
30
          // 2S后隐藏
31
          $ad.classList.add('none')
32
        }, 2000)
33
      }, 1000)
34
    }
35
    ad()
36
  </script>
37
</body>
38
</html>

Promise方式

1
function wait (ms) {
2
    return new Promise((resolve) => {
3
        setTimeout(resolve, ms)
4
    })
5
}
6
function ad () {
7
    const $ad = document.getElementById('ad');
8
    wait(1000).then(() => {
9
        // 1S后显示ad
10
        $ad.classList.remove('none')
11
        return wait(2000)
12
    }).then(() => {
13
        // 2S后隐藏ad
14
        $ad.classList.add('none')
15
        return wait(3000)
16
    }).then(() => {
17
        // 3S后重新显示ad
18
        $ad.classList.remove('none')
19
    })
20
}
21
ad()

async方式

1
function wait (ms) {
2
    return new Promise((resolve) => {
3
        setTimeout(resolve, ms)
4
    })
5
}
6
async function ad () {
7
    const $ad = document.getElementById('ad');
8
    await wait(1000)
9
    // 1S后显示ad
10
    $ad.classList.remove('none')
11
    await wait(2000)
12
    // 2S后隐藏ad
13
    $ad.classList.add('none')
14
    await wait(3000)
15
    // 3S后重新显示ad
16
    $ad.classList.remove('none')
17
}
18
ad()

async函数的返回值#

async函数的返回值是Promise对象，观察：

1
async function fn () {
2
    return 'hello world'
3
    //相当于
4
    return Promise.resolve('hello world')
5
}
6
console.log(fn());

async函数的各种形式#

函数声明：

1
async function fn () {}

函数表达式

1
const fn = async function(){}

箭头函数

1
const fn = async()=>{}

箭头函数单参数

1
const fn = async param => {}

对象方法

1
const obj = {
2
  fn:async function(){},
3
    fn1:async ()=>{},
4
  async fn(){}
5
}

class的方法

1
class ClassName{
2
  async fn(){}
3
}

async函数的注意事项#

async函数返回值是一个成功状态的Promise，如果需要失败的，需要手动设置

第一种方式：使用Promise.reject

1
    async function fn () {
2
      // return 123
3
      return Promise.reject(new Error('出错了'))
4
    }
5

6
    fn().catch(err => {
7
      console.log(err);
8
    })
9
    console.log(fn());

第二种方式，使用throw new Error，当然，这没必要可以去报错，如果逻辑错误了，Promise就是失败态

1
async function fn () {
2
    // return 123
3
    // return Promise.reject(new Error('出错了'))
4
    try {
5
        throw new Error('出错了')
6
    } catch (error) {
7
        console.log(error);
8
    }
9
}
10

11
console.log(fn());

async函数可以没有await，反过来则不行

await的机制#

沿用之前广告显示隐藏的例子

1
function wait (ms) {
2
    return new Promise((resolve) => {
3
        setTimeout(resolve, ms)
4
    })
5
}
6
async function ad () {
7
    const $ad = document.getElementById('ad');
8
    await wait(1000)
9
    // 1S后显示ad
10
    $ad.classList.remove('none')
11
    await wait(2000)
12
    // 2S后隐藏ad
13
    $ad.classList.add('none')
14
    await wait(3000)
15
    // 3S后重新显示ad
16
    $ad.classList.remove('none')
17
}
18
ad()

这里的await wait(1000)相当于阻塞了1秒后才执行后面的代码，相当于以下代码

1
wait(1000).then(() => {
2
    // 1S后显示ad
3
    $ad.classList.remove('none')
4
    return wait(2000)
5
}).then(() => {
6
    // 2S后隐藏ad
7
    $ad.classList.add('none')
8
    return wait(3000)
9
}).then(() => {
10
    // 3S后重新显示ad
11
    $ad.classList.remove('none')
12
})

结论：async函数中的代码有先后关系，await会阻塞该async函数中代码的执行，注意：await 确实会暂停 async 函数后续代码的执行，但它不会阻塞整个 JavaScript 主线程

await的值#

await 表达式的返回值，取决于它后面跟的是什么。核心规则：await 会等待 Promise 完成，并取出它成功完成时的结果；如果后面不是 Promise，则直接得到该值。

`await` 后面的值	`await` 表达式的结果
`Promise.resolve(100)`	`100`
`Promise.reject('失败')`	抛出 `'失败'`
`100`	`100`
`'hello'`	`'hello'`
`{ age: 18 }`	`{ age: 18 }`
`fetch('/api/data')`	请求成功后得到 `Response` 对象

await的注意事项#

await 只能在 async 函数中使用；注意：ES 模块还支持在函数外使用顶层 await。

1
async function fn() {
2
  const result = await Promise.resolve(100);
3
  console.log(result);
4
}
5

6
fn();

await 只暂停当前函数的后续执行；await 不会阻塞整个 JavaScript 主线程，其他代码仍然可以执行。

1
async function fn() {
2
  console.log(1);
3
  await Promise.resolve();
4
  console.log(2);
5
}
6

7
fn();
8
console.log(3);

await 后面可以跟普通值，不一定是 Promise；如果后面不是 Promise 或其他 thenable 对象，await 会将其作为已经完成的值处理。

1
async function fn() {
2
  console.log(await 100); // 100
3
  console.log(await 'hello'); // hello
4
}
5

6
fn();

await 遇到 rejected Promise 会抛出错误；因此，等待可能失败的异步操作时，可以使用 try...catch 处理错误。

1
async function fn() {
2
  try {
3
    const result = await Promise.reject('请求失败');
4
  } catch (error) {
5
    console.log(error); // 请求失败
6
  }
7
}
8

9
fn();

多个 await 默认按顺序等待

1
async function fn() {
2
  const a = await task1();
3
  const b = await task2();
4
}

如果 task2() 必须等待 task1() 完成后才能开始，这样写是合适的。

但如果两个任务相互独立，这样写会让它们依次执行，可以改为：

1
async function fn() {
2
  const [a, b] = await Promise.all([
3
    task1(),
4
    task2()
5
  ]);
6
}

这样两个任务可以同时启动，不必等待第一个任务完成后才启动第二个。

不要误以为 await 会自动等待所有异步任务：例如，forEach() 不会等待异步回调全部执行完毕：

1
async function fn() {
2
  [1, 2, 3].forEach(async item => {
3
    await task(item);
4
  });
5

6
  console.log('执行完毕');
7
}

这里的 '执行完毕' 不会等待所有 task() 完成。

如果需要依次执行，使用 for...of：

1
async function fn() {
2
  for (const item of [1, 2, 3]) {
3
    await task(item);
4
  }
5

6
  console.log('全部执行完毕');
7
}

如果需要并发执行并等待全部完成，可以使用 Promise.all()。

速记表#

注意事项	核心要点
使用位置	`async` 函数中，或 ES 模块顶层
执行机制	暂停当前异步函数的后续执行，不阻塞主线程
等待对象	可以是 Promise，也可以是普通值
错误处理	Promise 被拒绝时，`await` 会抛出错误
多个任务	有依赖就顺序等待，互相独立可考虑 `Promise.all()`
循环处理	`forEach()` 不会等待异步回调完成

其中，最值得掌握的是顺序等待与并发等待的区别，以及 await 的错误处理。这两点在实际开发中尤其常用。

继发和并发#

继发（顺序执行）前一个任务完成后，才开始执行下一个任务。

1
async function fn() {
2
  const a = await task1();
3
  const b = await task2();
4

5
  console.log(a, b);
6
}

并发（同时启动）：多个任务不必等待彼此完成，可以同时启动，然后统一等待结果。

1
async function fn() {
2
  const p1 = task1();
3
  const p2 = task2();
4
  const [a, b] = await Promise.all([p1, p2]);
5
  console.log(a, b);
6
}

项目应用实战#

二级菜单#

初始化代码

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>二级菜单</title>
6
    <style>
7
      /* css reset */
8
      * {
9
        padding: 0;
10
        margin: 0;
11
      }
12
      li {
13
        list-style: none;
14
      }
15

16
      /* menu */
17
      .menu {
18
        width: 100px;
19
        background-color: rgba(0, 0, 0, 0.1);
20
        margin: 10px;
21
      }
22
      .menu-item {
23
        position: relative;
24
        padding: 5px;
25
        cursor: pointer;
26
      }
27
      .menu-content {
28
        display: none;
29
        position: absolute;
30
        left: 100%;
31
        top: 0;
32
        width: 200px;
33
        height: 100px;
34
        padding: 0 5px;
35
        background-color: rgba(0, 0, 0, 0.1);
36
      }
37
      .menu-item:hover {
38
        background-color: rgba(0, 0, 0, 0.4);
39
      }
40
      .menu-item:hover .menu-content {
41
        display: block;
42
      }
43
      .menu-loading {
44
        margin: 45px 0 0 92px;
45
      }
46
    </style>
47
  </head>
48
  <body>
49
    <ul id="menu" class="menu">
50
      <!-- <li class="menu-item" data-key="hot" data-done="done">
51
        <span>热门出发地</span>
52
        <div class="menu-content">
53
          <img class="menu-loading" src="./loading.gif" alt="加载中" />
54
          <p>内地热门城市</p>
55
          <p>热门景点</p>
56
        </div>
57
      </li> -->
58
    </ul>
59

60
    <script>
61
      // https://www.imooc.com/api/mall-PC/index/menu
62
      // https://www.imooc.com/api/mall-PC/index/menu/hot
63
      // https://www.imooc.com/api/mall-PC/index/menu/hk
64
      function wait(ms) {
65
        return new Promise(resolve => {
66
          setTimeout(resolve, ms);
67
        });
68
      }
69
      function getJSON(url) {
70
        return new Promise(resolve => {
71
          const xhr = new XMLHttpRequest();
72

73
          xhr.addEventListener(
74
            'load',
75
            async () => {
76
              if (
77
                (xhr.status >= 200 && xhr.status < 300) ||
78
                xhr.status === 304
79
              ) {
80
                // 模拟网络延迟
81
                await wait(1000);
82
                resolve(xhr.response);
83
              }
84
            },
85
            false
86
          );
87

88
          xhr.open('GET', url, true);
89

90
          xhr.responseType = 'json';
91

92
          xhr.send(null);
93
        });
94
      }
95
    </script>
96
  </body>
97
</html>

实现：

1
(async function () {
2
    const url = 'https://www.imooc.com/api/mall-PC/index/menu'
3
    // 发送请求
4
    const menuResult = await getJSON(url);
5
    const $menu = document.getElementById('menu')
6
    console.log(menuResult);
7
    createMenu($menu, menuResult.data);
8
    // 循环绑定事件,发送请求，获取数据，创建子菜单
9
    const $item =$menu.getElementsByClassName('menu-item');
10
    [...$item].forEach($item => {
11
        $item.addEventListener('mouseenter', async () => {
12
            if ($item.dataset.done === 'done') return;
13
            const subMenuResul = await getJSON(`https://www.imooc.com/api/mall-PC/index/menu/${$item.dataset.key}`)
14
            $item.dataset.done = 'done'
15
            console.log(subMenuResul);
16
            createsubMenu($item, subMenuResul.data)
17
        },false)
18
    });
19
})()
20
function createMenu ($el, data) {
21
    let html = ''
22
    for (const item of data) {
23
        html += `
24
          <li class="menu-item" data-key="${item.key}">
25
            <span>${item.title}</span>
26
            <div class="menu-content">
27
              <img class="menu-loading" src="./loading.gif" alt="加载中" />
28
             `
29
        $el.innerHTML = html
30
    }
31
}
32
function createsubMenu ($el, data) {
33
    let html = ''
34
    for (const item of data) {
35
        html += `
36
          <p>${item.title}</p>
37
         `
38
    }
39
    $el.querySelector('.menu-content').innerHTML = html
40
}

音乐

音乐

async和await是什么#

使用async 和 await#

async函数的返回值#

async函数的各种形式#

async函数的注意事项#

await的机制#

await的值#

await的注意事项#

速记表#

继发和并发#

项目应用实战#

二级菜单#

文章分享

评论区

音乐

异步async和await

async和await是什么#

使用async 和 await#

async函数的返回值#

async函数的各种形式#

async函数的注意事项#

await的机制#

await的值#

await的注意事项#

速记表#

继发和并发#

项目应用实战#

二级菜单#

文章分享

评论区