# async 和 await

学好这篇，你必须理解了Promise的用法。特别是Promise的then链处理

# async 起什么作用

我们声明一个async函数，直接输出它的返回值，看看会发生什么事。

async function testAsync() {
    return "hello async";
}
 
const result = testAsync();
console.log(result);

1
2
3
4
5
6

看到输出你就会悟了，它返回了一个Promise对象

# await 到底在等啥

如果xxx()是一个返回Promise对象的函数，那么await是等待该Promise对象中调用resolve(x)或reject(x)中的参数x

let n = await xxx()

# 如何使用

现在开始制作一个延时计算器，它可能在世纪的工作中并没有什么用处，但是用来演示该篇是再好不过了。

定义一个multiply函数，它返回一个Promise对象，这个Promise对象调用的函数，将在1秒后返回reslove(input*input)的值。

function multiply(input) {
    return new Promise(function (reslove, reject) {
        console.log(input * input);
        setTimeout(reslove, 1000, input * input);
    });
}

1
2
3
4
5
6

再定义一个add函数，它返回一个Promise对象，这个Promise对象调用的函数，将在1秒后返回reslove(input+input)的值。

在Promise中我们知道，Promise中的函数调用了resolve，那么会将reslove中的参数传到then中。

let p = new Promise(function (resolve, reject) {
    reslove(666)
})
p.then(function (x) {
    console.log(x); // 666
})

1
2
3
4
5
6

现在我们定义一个使延时计数器开始的start函数，仔细理解这一段代码，它并不是很难。他将从10开始，先对自身乘一次，再与自身相加三次。

let start = new Promise(function (reslove, reject) {
    reslove(10);
})

start.then(multiply)
    .then(add)
    .then(add)
    .then(add)

start(10)
console.log("那么，我现在要开始吟唱了！")

1
2
3
4
5
6
7
8
9
10
11

现在将上述代码贴到浏览器中运行试试吧！

# 实操

如果我们使用 async 和 await 看看会发生什么事情吧。

我先入为主的告诉你，如果改写的话，他将长成这个样子。

async function start(a) {
    let b = await multiply(a);
    let c = await add(b)
    let d = await add(c)
    let e = await add(d)
}

start(10)

console.log("那么，我现在要开始吟唱了！")

1
2
3
4
5
6
7
8
9
10

好的，你会发现会稍微比之前的写法好看那么一点。在运行的过程中，你也可以不断的将a、b、c、d的方式中打印出来，你会发现他们的值，全是reslove(x)函数中的x。

你恍然大雾！原来await函数，等待的值，是reslove中的参数啊！

那如果调用的是reject呢？很可惜，如果按照上面的写法，在reject过后将reject(x)的参数x作为错误抛出来。

恩，得try/catch。或者使用Promise的catch也可以。

async function start(a) {
    let b = await multiply(a).catch((error) => {
        console.log(error)
    });
    console.log(b)
    let c = await add(b)
    let d = await add(c)
    let e = await add(d)
    console.log('结束啦')
}

start(10)

console.log("那么，我现在要开始吟唱了！")

1
2
3
4
5
6
7
8
9
10
11
12
13
14

好了，我不想写了，已经知道大致的用法了。

# 复述指引

把上面的代码关掉丢掉这张纸后再敲一遍。

← Promise