async与await基本认识与使用

忘是亡心i 2022-11-03 15:23 67阅读 0赞

#### async函数的含义和用法 ####

异步操作是JavaScript编程的麻烦事，一直有人提出各种各样的方案，试图解决这个问题！
    	从最早的回调函数，到Priomise对象，到Generator函数，每次都有所改进但是都不彻底！
    	async函数很多人人为它就是异步操作的终极解决方案。

async函数：
    	1：函数的返回值为promise对象
    	2：promise对象的结果由async函数执行的返回值决定

async函数的用法：

1：同Generator函数一样，async函数返回一个promise对象，可以使用then方法添加回调函数。
    	2：当函数执行的时候，一旦遇到await就会先返回，等到触发的异步操作完成，再接着执行函数体后面的语句。

对应的代码状态如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]

#### await函数的含义和用法 ####

说白了，await就是对promise成功的对象做一个获取，失败就try...catch

1：await右侧的表达式一般为promise对象，但也可以是其他的值
    2：如果表达式是promise对象，await返回的是promise成功的值
    3：如果表达式是其他值，直接将此值作为await的返回值。

注意：
    1：await必须写在async函数中，但是async函数中可以没有await
    2：如果await的promise失败了，就会抛出异常，需要通过try...catch捕获

#### 实例代码如下： ####

![在这里插入图片描述][20210228203723842.png]  
情况2：这种情况很少见，一般右侧都是promise对象

![在这里插入图片描述][2021022820404176.png]  
情况3：await右侧是失败的promise状态  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 3]

实例结果：输出打印这个异常！在catch中拿到这个结果。  
![在这里插入图片描述][20210228204754960.png]

#### async和await的结合,小案例和纯回调进行对比 ####

**使用await和async方式结合，读取三个html文件中的内容，进行一个拼接！！**

**使用纯回调函数来实现，读取三个html文件中的内容，进行一个拼接！！**

// 回调函数的方式
        const fs=require('fs');
        fs.readFile('./resource/ajia1.html',(err,data1)=>{ 
          if(err) throw err;
          fs.readFile('./resource/ajia1.html',(err,data2)=>{ 
            if(err) throw err;
            fs.readFile('./resource/ajia1.html',(err,data3)=>{ 
              if(err) throw err;
              console.log(data1+data2+data3);
                })
            })
        })

可以看到，二者想对比：

1：在错误处理这方面，async和await结合方式，用try catch包裹就可以，比原来使用纯回调函数要方便的多！不需要一层层判断。
    2：在async和await的使用过程中，我们是看不到回调函数的！
    3：在promise的then方法和catch方法中，可以看到有回调函数。
    4：非常简洁，就类似于我们写同步函数调用的方式，只不过在前面多了个await，但是他的内部的执行确是异步的。

#### 可以看到，async和await结合的方式非常简洁，就类似于我们写同步函数调用的方式，只不过在前面多了个await，但是他的内部的执行确是异步的。 ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]: /images/20221023/9e1762ce63e2467b91beb289a0bb6095.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]: /images/20221023/13c9657a7d4a40cb9dfa649fdc74d16a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]: /images/20221023/99866162b8844d7999728b7f830d5914.png
[20210228203723842.png]: /images/20221023/c26551789f3d4a5b9fa69acfddf91102.png
[2021022820404176.png]: /images/20221023/9453827d2654440ca302d52123db160c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 3]: /images/20221023/c0bfc1440ef34731ade02f3e3728171d.png
[20210228204754960.png]: /images/20221023/5dc08f94473945e5b6f992fef418148b.png