AJAX进阶（笔记）

同步代码和异步代码

同步代码：逐行执行，原地等待结果后，才继续向下执行

异步代码：调用后耗时，不阻塞代码执行，将来完成后触发回调函数

异步代码依靠回调函数来接收结果

js中的异步代码：

• setTimeout/setInterval
• 事件
• AJAX

• 回调函数地狱和Promise链式调用

  回调函数地狱

  概念：在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱

  缺点：可读性差，异常无法捕获，耦合性严重，牵一发动全身

  Promise-链式调用

  概念：依靠then（）方法会返回一个新生成的Promise对象特性，继续串联下一环任务，直到结束

  细节：then（）回调函数中的返回值，会影响新生成的Promise对象的最终状态和结果

  好处：通过链式调用，解决回调函数嵌套问题

  

  asyns和await使用

  定义：async和await关键字让我们可以用一种更简洁的方式写出基于Promise异步行为而无需刻意地链式调用promise

  概念：在async函数内，使用await关键字取代then函数，等待获取Promise对象成功状态的结果值

  async函数和await_捕获错误

  使用：try……catch

  语法：

  try{
      //要执行的代码
      }catch(error){
      //error里，接受的是，错误信息
      //try里的代码，如果有错误，直接进入这里执行
      }
  

  事件循环-EventLoop

  事件循环

  概念：事件循环负责执行代码，收集和处理事件以及执行队列中的子任务

  原因：js单线程（某一刻只能执行一行代码），为了让耗时代码不阻塞其他代码运行，设计了事件循环模型

  事件循环-执行过程

  定义：执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里的回调函数的执行机制，就叫作事件循环

  步骤：

  1.执行同步代码，遇到 异步代码交给宿主浏览器环境执行

  2异步有了结果后，把回调函数放入任务队列排队

  3.当调用栈空闲后，反复调用任务队列里的回调函数
  

  宏任务和微任务

  异步任务分为：

  — 宏任务：由浏览器环境执行的异步代码

  — 微任务：由JS引擎环境执行的异步代码

  任务（代码）	执行所在环境
  JS脚本执行事件（script）	浏览器
  setTimeout/setInterval	浏览器
  AJAX请求完成事件	浏览器
  用户交互事件等	浏览器
  Promise对象.then（）	JS引擎

  promise本身是同步的，而then和catch回调函数是异步的

  

  js内代码如何执行？

  1.执行第一个script脚本事件宏任务，里面同步代码

  2.遇到宏任务/微任务交给宿主环境，有结果回调函数进入对应队列

  3.当执行栈空闲时，清空微任务队列，再执行下一个宏任务，从一再来

  

  Promise.all静态方法

  概念：合并多个Promise对象，等待所有同时成功完成（或某个失败），做后续逻辑

  
  语法：

  const p=Promise.all([Promise对象，Promise对象,……])
  p.then(result=>{
    //result结果：[promise对象成功结果，Promise对象成功结果，……]
  }).catch(error=>{
    //第一个失败的Promise对象，抛出的异常
  })