JavaScript异步之async

ゞ浴缸里的玫瑰 2022-03-28 02:13 253阅读 0赞

前面我们已经讲过Promise、Generator，今天呢我们讲一下async，async与前面所讲的有很大的关联

# async函数 #

async作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行，我们看一下例子：

async function testAsync() { 
    return "Hello World"
    }
    testAsync()
    console.log("我在后面,我执行了!")

看下输出：  
![在这里插入图片描述][20190109093405492.png]  
我们发现 testAsync 虽然调用了但是没有输出，它不是应该输出"Hello World"么，那么我们打印下testAsync()看那看输出了什么

async function testAsync() { 
    return "Hello World"
    }
    console.log(testAsync())
    console.log("我在后面,我执行了!")

输出：  
![在这里插入图片描述][20190109093846932.png]  
我们可以发现async 函数返回的是一个promise 对象，如果要获取到promise 返回值，我们应该用then 方法， 继续修改代码：

async function testAsync() { 
    return "Hello World"
    }
    testAsync().then(res =>{ console.log(res)})
    console.log("我在后面,我执行了!")

输出：

![在这里插入图片描述][20190109094133236.png]  
我们获取到了"hello world’, 同时testAsync的执行也没有阻塞后面代码的执行，和 我们刚才说的一致。  
到这，肯定有人觉得，就是封装一个Promise的对象返回，这有什么用，别急我们继续往下看。

# await关键字 #

在前面讲generator时我们熟悉了yield关键字，yield关键字只能使用在generator函数中，同样，await关键字也不能单独使用，是需要使用在async方法中。 await是等待的意思，那么它等待什么呢，它后面跟着什么呢？其实它后面可以放任何表达式，不过我们更多的是放一个返回promise 对象的表达式；

function testAwait() { 
    return new Promise((resolve,reject) =>{ 
    setTimeout(() =>{ 
    console.log("My name is LJJ")
    resolve()
    },1000)
    })
    }
    
    async function testAsync() { 
    await testAwait()
    console.log("Hello World")
    }
    testAsync()

输出：  
![在这里插入图片描述][20190109100233665.png]  
**1、testAwait()方法中new一个Promise对象返回，promise对象中用setTimeout模拟一个异步过程，即1s后打印"My name is LJJ"。  
2、testAsync()方法中，await testAwait(),表示将阻塞这里，等待testAwait这个异步方法执行并返回结果后，才继续下面的代码。**  
所以我们看出await的作用，就是阻塞主函数的执行，直到后面的Promise函数返回结果。

前面我们说到了async返回的是一个Promise对象。既然是返回一个Promise对象的话那处理当异步请求发生错误的时候我们就要处理reject的状态了。

function testAwait() { 
          return  Promise.reject('这出了一个错误')
        }
        async function testAsync() { 
            await testAwait()
            console.log("Hello World")
        }
        testAsync().then(res =>{ conosle.log(res)}).catch(err =>{ console.log(err)})

输出：  
![在这里插入图片描述][20190109105046128.png]  
从执行结果看，返回reject状态被外层的catch捕获到，然后终止了后面的执行。  
但是在有些情况下，出错后是希望继续执行，而不是中断。对于这种情况可以采用tcy…catch在函数内部捕获异常，继续看代码：

function testAwait() { 
    return Promise.reject("这出了一个错误!")
    }
    async function testAsync() { 
    try { 
    await testAwait()
    }catch(err){ 
    console.log(err)
    }
    console.log("Hello World!")
    }
    testAsync()

输出：  
![在这里插入图片描述][20190109105901692.png]  
异常被try…catch捕获后，继续执行下面的代码，没有导致中断。

JavaScript异步系列文章至此差不多已经讲完，明天我们主要讲一下异步实战，作为最终篇章

友情链接：[点击查看所有文章目录][Link 1]

友情链接：[点击查看　JavaScript异步系列文章目录][JavaScript]

[20190109093405492.png]: /images/20220328/05accd54dc3b4dabaeee4ea82e955df9.png
[20190109093846932.png]: /images/20220328/24a88318b33a42febbe72998e107e95d.png
[20190109094133236.png]: /images/20220328/64dc091c3e174f3c9aadfaa9e4def417.png
[20190109100233665.png]: /images/20220328/0e0f112c1d2b4b06bea70d7f481432df.png
[20190109105046128.png]: /images/20220328/448a6f746650427bbe1ee710521ec592.png
[20190109105901692.png]: /images/20220328/0dd6018c7eb34dc1931a754b42b6cad7.png
[Link 1]: https://blog.csdn.net/qq_42911663/article/details/86365901
[JavaScript]: https://blog.csdn.net/qq_42911663/article/details/86369813