async 和Generator基本用法和概念介绍。

柔情只为你懂 2022-12-17 07:23 30阅读 0赞

# 基本概念 #

1、 async 表示这是一个async函数，await只能用在这个函数里面。

2、await 表示在这里等待promise返回结果了，再继续执行。

3、await 后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了…）

这里我们要实现一个暂停功能，输入N毫秒，则停顿N毫秒后才继续往下执行。

#### 普通函数 ####

控制台先后打印顺序 先打印开始然后打印结束

# `async`函数 #

async函数是Generator函数的语法糖，将Generator的星号换成async将yield换成await，async函数比Generator函数更好用

1、自带执行器，执行起来，跟调用普通函数一样  
2、async和await 语义更清晰，async表示函数里有异步操作，await 表示紧跟在后面的表达式需要等待结果  
3、await后面啥都可以跟，可以是Promise 也可以是对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作

[点击查看Generator介绍及用法][Generator]

控制台执行顺序如下图  
可以看出来，每次打印都会停1000毫秒然后再继续执行，有点类似于Generator函数。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]

# 捕捉错误 #

用`try catch`语法捕捉错误也可以捕捉到，用`.then()和.catch()`也可以，上面async函数函数中用到了`.then()和.catch()`，下面展示一下用`try catch`捕捉错误的代码。

上述代码控制台先会打印`async`间隔三秒打印`end`  
如果将上面地的 `resolve("成功")`换成`reject('error');`则会先打印`async`间隔三秒打印`err`

[Generator]: https://blog.csdn.net/weixin_48653480/article/details/109106386
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/4e63cd979c354a758b1fa3eecceef424.png