在线学习Node.js——Day6

今儿！我吃到了自热火锅！且我能申请离开这里了，但是需要先买到机票或者火车票，然后再跟社区提出申请，但是！勺子抢不到票啊！救救孩子😭

---

目录

async和await

async

await

try-catch

练习and加强理解

---

async和await

async

async概念：通过async可以快速的创建异步函数，异步函数返回值会自动封装到一个Promise中返回（能返回Promise的函数就是异步函数）

在之前的学习里，我们创建和使用异步函数的方法如下：

//旧法
    //创建一个异步函数
    function fn1(){
        return Promise.resolve(111)  //返回一个Promise
    }

    //用then来返回存储的值
    fn1().then(r => {
        console.log(r)
    })

用async创建的话：

//新法
    async function fn1_2(){
        return 222
    }
        
    fn1_2().then(r => {
        console.log(r)    //用then来返回存储的值
    })

await

前情提要：Promise解决了异步调用中回调地狱的问题。虽然通过Promise链式调用解决了回调地狱，但是链式调用太多依旧不是很好看，所以await小兄弟横空出世！

Promise解决回调地狱的方法如下：

function sum(a,b){
        return new Promise(resolve => {
            setTimeout( () => {
                resolve(a + b)
            },1000)
        })
    }

    async function fn2() {
        sum(123,456)
                .then(r => sum(r,7))
                .then(r => sum(r,8))
                .then(r => console.log(r))
    }
    fn2()  

await概念：通过await去调用异步函数时，它会暂停代码的运行，直到异步代码执行有结果时，才会将结果返回

注意：

      -  await只能用于 async声明的异步函数中，或es模块中的顶级作用域中

      - await是会阻塞的，但阻塞的只是跟它在同一个异步函数内部的代码

function sum(a,b){
        return new Promise(resolve => {
            setTimeout( () => {
                resolve(a + b)
            },1000)
        })
    }


async function fn3_1(){
    //let result = sum(123,456) 返回的result是个Promise
    let result = sum(123,456)
    console.log(result)
}
fn3_1()

async function fn3_2(){
    let result = await sum(123,456)
    result = await sum(result,8)
    result = await sum(result,9)
    console.log(result)
}
fn3_2()

//fn3_1() 返回的是个Promise
//fn3_2() 返回 596

try-catch

好的，我学到这里时，网课的老师发问了：同xiao们，你们有没有感觉差了点什么？（坏笑）   咱们差了catch！所以问题来了，在async里怎么搞处理异常的功能捏？没错，就是try-catch！

概念：通过await调用异步代码时，需要通过try-catch来处理异常

async function fn4(){
try{
    let result = await sum(123,456)
    result = await sum(result,8)
    result = await sum(result,9)

    console.log(result)
}
catch(e){
    console.log("出错啦～");
}
}
fn4()

练习and加强理解

1、对async的加强理解

//fn5_1()和fn5_2()，是等价的
async function fn5_1() {
    console.log(51);
    console.log(52);
    console.log(53);
}fn5_1()

function fn5_2(){
    return new Promise(resolve => {
        console.log(551);
        console.log(552);
        console.log(553);
        resolve()
    })
}fn5_2()

2、对await的加强理解

当我们使用await调用函数后，当前函数后面的所有代码，会在当前函数执行完毕后，被放入到微任务队列中（一个await就相当于把它放到一个then里）

//fn6_1()和fn6_2()，是等价的
async function fn6_1() {
    console.log(1);
    await console.log(2);
    await console.log(666);
    console.log(3);
}fn6_1()

console.log(4);

//返回 1 2 4 666 3

function fn6_2(){
    return new Promise(resolve => {
        console.log(1);
        console.log(2);
        resolve()
    }).then(r => {console.log(999)})
      .then(r => {console.log(3)})
}fn6_2()

console.log(4);

//返回 1 2 4 999 3

3、调用await的那些事

在 .js文件中，调用await的方法有两种，如下：

//fn7_1() 和 ;(async => {})() ,是等价的
async function fn7_1() {
    await console.log(123);
}
fn7_1()

;(async () => {
    await console.log(123123);
})()

在.html 中调用，需要将script变成模块才行

<!-- type="module"  使得我们的script变成了一个模块了 -->
    <script type="module">
        await console.log(123);
    </script>
    

在.mjs中可以直接调用 （mjs是nodejs里创建一个模块的方式）

//文件命名为 XXX.mjs
await console.log(123);

---

大概就是这些，然后我还看了一部分模块化的课，但是木有看完所以明天看完课再一起写笔记叭，要去睡觉惹，晚安安捏！