async/await-事件循环

前面我们学习了生成器和迭代器，那么在本篇文章中，我们主要讲解生成器与Promise的结合使用，从而引出async/await语法，同时会涉及面试中频次最高的一个知识点：事件循环

生成器与异步处理

• 首先需要了解回调地狱
  • 在Promise出来之前，我们多次请求网络接口，有可能产生回调地狱

    //伪代码
    function request(url) {
      //请求的逻辑代码
      //返回一个结果
      return res;
    }
    //这样一层嵌套着一层，就是回调地狱
    request("第一次").then((res1) => {
      request("第二次" + res1).then((res2) => {
        request("第三次" + res2);
      });
    });
    

    • 而Promise的出现就解决了回调地狱的问题
      • 不明白return的返回值的，可以看我先前的文章，Promise–详解

        function request(url) {
          return new Promise((resolve, reject) => {
            resolve(url);
          });
        }
        //这样就解决了回调地狱的问题，将代码写成了链式调用
        request("第一次")
          .then((res1) => {
            console.log(res1);
            return request("第二次" + res1);
          })
          .then((res2) => {
            console.log(res2);
            return request("第三次" + res2);
          })
          .then((res3) => {
            console.log(res3);
            return request("结束");
          });
        

        • 以上代码虽然解决了回调地狱的问题，但是看上去不是很优雅
        • 因此可以和生成器相结合，优化出以下的代码

          /*理想代码
          function getData(){
            let res = yield request(url);
            let res1 = yield request(res);
            let res2 = request(res1);
          }
          */
          function request(url) {
            return new Promise((resolve, reject) => {
              resolve(url);
            });
          }
          //在获取上一次结果之后，再进行下一次请求
          //因此我们就可以应用到yield
          function* getdata(url) {
            //yield空格后面的函数会直接执行
            let res = yield request(url);
            let res1 = yield request(res);
            let res2 = yield request(res1);
            console.log("请求结束");
          }
          //执行生成器函数
          let generator = getdata("test");
          //这时候执行next，其返回值{value:Promise,done{false}}
          //因此我们获取value调用then方法，就可以获取resolve的值
          // console.log(generator.next());
          generator.next().value.then((res) => {
            console.log(res);
            //第一次执行完之后，就会去进行下一次请求
            generator.next(res + "test").value.then((res1) => {
              console.log(res1);
              //第二次执行完之后，就会进行第三次
              generator.next(res1 + "test").value.then((res2) => {
                console.log(res2);
                //此时运行最后一行console代码
                generator.next();
              });
            });
          });
          

          • 而我们只希望有 getdata这种函数，所以引出了 async/await的语法
          • 实际上是Promise与生成器的语法糖

            function request(url) {
              return new Promise((resolve, reject) => {
                setTimeout(() => {
                  resolve(url);
                }, 2000);
              });
            }
            //在获取上一次结果之后，再进行下一次请求
            //因此我们就可以应用到yield
            async function getdata(url) {
              //yield空格后面的函数会直接执行
              let res = await request(url + 1);
              console.log(res);
              let res1 = await request(res + 2);
              console.log(res1);
              let res2 = await request(res1 + 3);
              console.log(res2);
              console.log("请求结束");
            }
            getdata("test");
            

            异步函数async/await

            异步函数结构

            函数分为：普通函数、生成器函数、异步函数，本次就开始学习异步函数

            • 在函数前面加 async即可，并当成普通函数执行

              async function foo(){}
              const bar = async ()=>{}
              

              异步函数的返回值

              异步函数内部代码执行过程和普通函数是一致的

              • 普通函数没有指定返回值的时候，返回的是undefined；而异步函数返回值相当于被Promise.resolve()包裹
              • 如果返回的是一个Promise，则会由这个Promise决定
              • 如果返回的是一个对象，且对象中有then方法，则会由这个then方法决定

                //其他情况之前的文章有讲过，不再演示
                async function foo() {
                  return 123;
                }
                foo().then((res) => {
                  console.log(res);//123
                });
                

                异步函数的异常

                异步函数返回的是一个Promise，Promise有三种状态，正常执行是pending，return是fulfilled，那么何时抛出异常

                • 一些api使用错误时
                • 主动通过throw抛出

                  async function foo() {
                    //在执行的时候，不会立即报错，会将错误信息用reject包裹
                    "123".filter();
                      //或者使用throw进行抛出异常
                      throw new Error("主动抛出异常")
                    return 123;
                  }
                  foo()
                    .then((res) => {
                      console.log(res); //123
                    })
                    .catch((err) => {
                      console.log(err);
                      //不会影响下面的代码执行
                      console.log(123456);
                    });
                  

                  await关键字的使用

                  • 必须在异步函数中使用
                  • 一般后面跟着一个表达式，且这个表达式返回的是一个Promise（await后面可以直接跟一个普通函数或者数据，但是没有任何意义）
                  • await会等到 Promise状态为fulfilled的时候，继续执行下面的代码
                  • 若Promise返回的是rejected，就需要进行捕获

                    function request(count) {
                      return new Promise((resolve, reject) => {
                        setTimeout(() => {
                          resolve(count);
                        }, 1000);
                      });
                    }
                    async function getData() {
                      let res = await request(1);
                      console.log(res);
                      let res1 = await request(res + 1);
                      console.log(res1);
                      let res2 = await request(res1 + 1);
                      console.log(res2);
                    }
                    getData();
                    

                    • 捕获异常的方式

                      function request(count) {
                        return new Promise((resolve, reject) => {
                          setTimeout(() => {
                            reject(count);
                          }, 1000);
                        });
                      }
                      //方式一
                      async function getData() {
                        let res = await request(1);
                        console.log(res);
                        let res1 = await request(res + 1);
                        console.log(res1);
                        let res2 = await request(res1 + 1);
                        console.log(res2);
                      }
                      //因为异步函数的返回值是Promise
                      getData().catch((err)=>{
                          console.log(err)
                      })
                      //方式二，使用try catch
                      async function getData() {
                        try {
                          let res = await request(1);
                          console.log(res);
                          let res1 = await request(res + 1);
                          console.log(res1);
                          let res2 = await request(res1 + 1);
                          console.log(res2);
                        } catch (error) {
                          console.log(error);
                        }
                      }
                      

                      await/async关键字的结合使用

                      • 多个异步函数之间可以使用await

                        async function first(){}
                        async function second(){}
                        async function third(){}
                        async function foo(){
                            //第一个函数执行完成，且返回的是fulfilled状态，才会执行下面的代码
                            await first()
                            await second()
                            await third()
                        }
                        foo()
                        

                        进程和线程

                        • 进程和线程是操作系统的两个概念
                          • 进程：计算机已经运行的程序（打开应用程序，就会开启至少一个进程），是操作系统管理程序的一种方式
                          • 线程：操作系统能够运行 运算的调度的最小单位，通常情况下它被包含在进程中
                          • 以下是形象的解释
                            • 进程：可以认为，打开一个应用程序，就会默认启动一个进程（可以是多进程）
                            • 线程，每一个进程中，都会至少启动一个线程来执行其中的代码（也有可能是多线程）
                            • 所以可以说，进程是线程的容器

                              浏览器中的JS线程

                              • JS是单线程（可以开启workers），但是JS的线程有自己的 容器：浏览器和Node

                              • 浏览器是多进程的，当我们打开 一个新的tab页面的时候，就会开启一个新的进程，这是为了防止一个页面卡死，而造成所有页面无法响应

                                • 每个进程会有多个线程，其中有一个线程是专门分给JS代码运行的

                                • 即，JS代码一次只能做一次事情，如果这个线程十分耗时，当前线程 就会阻塞

                                • 所以真正耗时的操作，并不是由JS线程在执行的

                                  • 浏览器每个进程都是多线程的，那么其他线程可以来完成这个耗时的操作
                                  • 比如网络请求、定时器，我们只需要在特定的时候执行应该有的回调即可

                                    浏览器的事件循环

                                    • 首先了解一下事件队列
                                      • 浏览器在处理DOM监听，ajax请求，定时器的时候，会将相关函数里面的回调函数，放入事件队列中
                                      • 事件队列是一种数据结构，遵循先进先出的原则
                                      • 那么在JS执行的过程中，遇见了定时器等相关事件，又会怎么操作
                                        • 首先会执行函数，但是不会执行里面的回调函数
                                        • 将里面的回调函数交由浏览器其他线程
                                        • 其他线程在处理好之后，将回调函数放入事件队列中
                                        • 待执行栈中空了，就会从事件队列中取出待执行的函数

                                          

                                          微任务和宏任务

                                          事件循环中并非只维护者一个队列，事实上有两个队列：宏任务队列和微任务队列

                                          • 宏任务队列：ajax、setTimeout、setInterval、DOM监听、Rendering等

                                          • **微任务队列：**Promise的then回调（Promise中的代码会立即执行），Mutation Observer API queueMicrotask()等

                                          • 那么这两个队列的优先级是什么样的

                                            • main script中的代码优先执行
                                            • 再执行 任何一个宏任务之前（不是队列，是单个的宏任务），都会先去检查微任务队列中，是否有任务需要执行
                                              • 也就是说 每一个宏任务执行之前，必须保证微任务的队列是空的
                                              • 如果不为空，那么就优先执行微任务队列中的任务
                                              • 若微任务中的代码不断往微任务队列中增加任务，则宏任务中的代码则会无线延期

                                                抛出异常-throw

                                                遇到throw，代码就会停止执行，且后面的代码不会执行

                                                • throw后面可以跟String、number、boolean、对象

                                                  throw {message:"错误"，code:-1001}
                                                  

                                                  • 后面可以接表达式（new Error）

                                                    throw new Error("这是错误")
                                                    //会把错误地方的调用栈，错误信息都会打印出来
                                                    

                                                    捕获异常的方式

                                                    当代码抛出异常之后，不去捕获的话，就会很危险

                                                    try catch捕获异常

                                                    • 如果我们在调用一个函数的时候，这个函数抛出了异常，但是并没有对 这个异常进行处理，那么这个 异常会继续传递到上一个函数调用中（会一层一层向上传递）
                                                    • 如果到了全局，依旧没有对异常进行处理，浏览器就会终止程序

                                                      function bar(){
                                                          throw "我是错误"
                                                      }
                                                      function foo(){
                                                          try{
                                                              foo()
                                                          }catcha(error){
                                                              console.log(error)
                                                          }
                                                      }
                                                      foo()
                                                      

                                                       
                                                       微信引流推广  建设银行个人网上银行  江门网站建设制作  南通网站建设公司  给企业做网站的公司  杭州网站建设方案策划