ES6之async与await

· async – await 是 Promise 和 Generator 的语法糖，目的只是为了让我们书写代码时更加流畅，增强代码的可读性。

· async – await 是建立在Promise机制之上的，并不能取代其地位

基本语法：

async function demo01() {
  let result = await Math.random()
  console.log(result)  
}

demo01()   //  输出一个随机数
1
2
3
4
5
6

async：

async用来表示函数是异步的，定义的函数会返回一个Promise对象，可以使用then方法添加回调函数

async function demo02() {
  return '返回结果'  
}

demo02().then(res => console.log(res)) // 输出： 返回结果（若 async 定义的函数有返回值，相当于Promise.resolve('返回结果')）
1
2
3
4
5

await：await必须出现在 async 函数内部，不能单独使用。

·await后面可以跟任何js表达式。它最主要的意图是用来等待 Promise 对象的状态被 resolved。

·如果await的是 Promise 对象会造成异步函数 停止执行并且 等待Promise的解决,如果等的是正常的表达式则立即执行。

使用方法：

function sleep(second) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('enough sleep~')
    }, second)
  })
}

async function dome03() {
  await () => {console.log('表达式立即执行')}
  let result = await sleep(2000)
  console.log(result)  //需要等待 sleep 函数执行完成 resolve 才输出（2000毫秒后输出：enough sleep~）       
}
1
2
3
4
5
6
7
8
9
10
11
12
13

实例1（模拟当一个请求需要依赖上一个请求返回的参数时，async与await的使用实例）：

// 模拟异步请求
function sleep(second, param) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(param);
        }, second);
    })
}

async function test() {
    let result1 = await sleep(2000, 'req01')
    // 等待第一个 await 执行完成
    let result2 = await sleep(1000, 'req02' + result1)
    // 等待第二个await 执行完成
    let result3 = await sleep(500, 'req03' + result2)
    // 等待所有的await执行完成
    console.log(`${result3} --- ${result2} --- ${result1}`)
}

test()  // 等待所有的 await 执行完成输出：req01 --- req02req01 --- req03req02req01
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

实例2（当需要异步发送多个请求且请求都是独立时的实例）：

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('request done! ' + Math.random());
        }, second);
    })
}

// 正确写法
async function correctDemo() {
    let p1 = sleep(1000);
    let p2 = sleep(1000);
    let p3 = sleep(1000);
    // Promise.all('一个可迭代的对象') 将多个 Promise 实例，包装成一个新的 Promise 实例，一次性处理n个Promise对象。
    await Promise.all([p1, p2, p3]);
    console.log('clear the loading~');
}

// 错误写法：以下写法不能实现同步请求，必须等待第一个await接收到sleep的解决才会执行第二个await
async function bugDemo() {
    await sleep(1000)
    await sleep(1000)
    await sleep(1000)
    console.log('clear the loading~')
}

correctDemo()
bugDemo()
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

错误处理：

处理错误

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('want to sleep~');
        }, second);
    })
}

async function errorDemoSuper() {
    try {
        let result = await sleep(1000);
        console.log(result);
    } catch (err) {
        console.log(err); // 当await等待的结果为reject时执行
    }
}

errorDemoSuper() // 输出：want to sleep~
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

捕捉错误：

// 定义个抛出异常的方法
function errorTest(second) {
    throw new Error('抛出一个异常！！！')
}
1
2
3
4

方式1：通过 try … catch捕获

try {
  errorTest()
}catch(error){
  console.log(error)  
}
1
2
3
4
5

方式2： 在then回调中捕获

errorTest().then(
 resolve => console.log(resolve),
 error => console.log(error)   
)
1
2
3
4

方式3：在Promise的catch中捕获

errorTest().catch(
  error => console.log(error)
)
1
2
3