2022-01-28 async和await的定义和用法

1.定义

async作为一个关键字放在函数前面，表示该函数是一个异步函数，
异步函数意味着该函数的执行不会阻塞后面代码的执行；
await 用于等待一个异步方法执行完成；

async/await的作用就是使异步操作以同步的方式去执行

2.async

语法:在函数前面加上async关键字，表示函数是异步的

定义和调用异步函数的示例

//定义
 async function timeout() {//只有一个作用，它的调用会返回一个promise对象
     return 'hello world!'
 }
//调用
 timeout()
 console.log('我虽然在后面，但是先执行')

结果:没有输出hello world

改成console.log(timeout),输出:

分析

async 函数返回的是一个promise 对象，并且Promise还有state和result，
如果async函数中有返回值，当调用该函数时，内部会调用Promise.resolve()方法,
把它转化成一个promise对象作为返回

因此,要想获取到async 函数的执行结果，就要调用promise的then 或 catch 来给它注册回调函数

最终代码

  async function timeout() {
      return 'hello world!'
    }
    timeout().then(val => {//调用promise的then来给它注册回调函数
      console.log(val)
    })
    console.log('我虽然在后面，但是先执行')

输出

我虽然在后面，但是先执行
hello world!

总结

async声明的异步函数执行完会返回一个promise 对象,
要调用promise的then,来给这个函数注册回调函数,才能获取到async 函数的执行结果

3.await

await语法

await关键字只能放到async函数里面，await是等待的意思

await的表达式

await不仅仅用于等Promise对象，还可以等任意表达式，所以await后面可以接普通函数调用,或者返回promise 对象的表达式:
1.如果它等到的不是一个Promise对象，那么await表达式的运算结果就是它等到的东西。
2.如果它等到的是一个Promise对象，await会阻塞函数后面的代码，等着Promise对象resolve，然后得到resolve的值，作为await表达式的运算结果。

await用法示例

function getSomething() {return 'something'}

// async function fn() { return Promise.resolve('hello async')}
//此处等价于
async function fn() {return "hello async";}
fn().then(val => { return val;})
    
async function test() {
    //1.等到的不是一个promise对象==>直接输出await表达式的运算结果
    const v1 = await getsomething();
    //2.等到的是一个promise对象==>阻塞函数后面的代码，等待并得到resolve的值作为await表达式的运算结果
    const v2 = await fn();
    console.log(v1, v2);//something hello async
}
test();
console.log("虽然我在后面,但是我先执行!");//最先执行

await的优势:处理 then 链,使代码看起来像同步代码一样

示例

//写一个函数，让它返回promise 对象，该函数的作用是2s 之后让数值乘以2
     function doubleAfter2seconds(num) {
         return new Promise((resolve, reject) => {
             setTimeout(() => {
                 resolve(num * 2)
             }, 2000)
         })
     }
 //使用async+await 关键字写一个函数，await 后面放置的是返回promise对象的一个表达式，
//所以它后面可以写上 doubleAfter2seconds 函数的调用
     async function testResult() {
         let result = await doubleAfter2seconds(30);
         console.log(result); //2s后打印60
     }
     testResult();

4.总结

1.async 函数
	1)函数的返回值为Promise对象
	2)Promise对象的结果由async函数执行的返回值决定
2.await 表达式
	1)await右侧的表达式一般为promise对象, 但也可以是其它的值
	2)若await表达式是一个Promise对象，await会阻塞函数后面的代码，等着Promise对象resolve，然后得到resolve的值，作为await表达式的运算结果。
	3)如果表达式是其它值, 直接将此值作为await的返回值
3.async和await基于promise的。使用async的函数将会始终返回一个 promise 对象,在使用await的时候我们只是暂停了函数，而非整段代码。
4.async和await是非阻塞的,仍然可以使用 Promise，例如Promise.all().
5.注意
	1)await必须写在async函数中, 但async函数中可以没有await
	2)如果await的promise失败了, 就会抛出异常, 需要通过try…catch来捕获处理

5.参考文档

https://blog.csdn.net/weixin_45811256/article/details/123638582