Ajax进阶篇

###!!!

已于 2023-09-03 16:07:29 修改

阅读量40

点赞数 1

文章标签： ajax 前端

于 2023-08-23 21:03:54 首次发布

本文链接：https://blog.csdn.net/ge_ziye/article/details/132461014

版权

01.同步代码和异步代码

讲解

同步代码：逐行执行，需原地等待结果后，才继续向下执行
异步代码：调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发回调函数传递结果

例如：有下面的打印顺序发现异步代码接收结果，使用的都是回调函数

const result = 0 + 1console.log(result)
setTimeout(() => {
  console.log(2)
}, 2000)
document.querySelector('.btn').addEventListener('click', () => {
  console.log(3)
})
document.body.style.backgroundColor = 'pink'console.log(4)

结果：1， 4， 2
按钮点击一次打印一次 3

小结

什么是同步代码?

逐行执行，原地等待结果后，才继续向下执行</li>

什么是异步代码?

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

JS 中有哪些异步代码?

setTimeout / setInterval，事件，AJAX

异步代码如何接收结果?

依靠回调函数来接收

02.回调函数地狱

概念：在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱
缺点：可读性差，异常无法捕获，耦合性严重，牵一发动全身

03.Promise-链式调用

讲解

概念：依靠 then() 方法会返回一个新生成的 Promise 对象特性，继续串联下一环任务，直到结束
细节：then() 回调函数中的返回值，会影响新生成的 Promise 对象最终状态和结果
好处：通过链式调用，解决回调函数嵌套问题

小结

什么是 Promise 的链式调用?

使用 then 方法返回新 Promise 对象特性，一直串联下去

then 回调函数中，return 的值会传给哪里?

传给 then 方法生成的新 Promise 对象

Promise 链式调用有什么用?

解决回调函数嵌套问题

04.Promise-链式调用_解决回调地狱

讲解

每个 Promise 对象中管理一个异步任务，用 then 返回 Promise 对象，串联起来

小结

Promise 链式调用如何解决回调函数地狱?

then 的回调函数中 return Promise对象，影响当前新 Promise 对象的值

05.async 函数和 await

讲解

概念：在 async 函数内，使用 await 关键字取代 then 函数，等待获取 Promise 对象成功状态的结果值
做法：使用 async 和 await 解决回调地狱问题，使用 await 替代 then 的方法

小结

await 的作用是什么？

替代 then 方法来提取 Promise 对象成功状态的结果

06.async 函数和 await 捕获错误

讲解

try 和 catch 的作用：语句标记要尝试的语句块，并指定一个出现异常时抛出的响应
```
try {
  // 要执行的代码
} catch (error) {
  // error 接收的是，错误消息
  // try 里代码，如果有错误，直接进入这里执行
}
```
try 里有报错的代码，会立刻跳转到 catch 中

小结

try 和 catch 有什么作用？

捕获同步流程的代码报错信息

07.事件循环

讲解

作用：事件循环负责执行代码，收集和处理事件以及执行队列中的子任务
原因：JavaScript 单线程（某一刻只能执行一行代码），为了让耗时代码不阻塞其他代码运行，设计了事件循环模型
概念：执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制，就叫事件循环

小结

什么是事件循环？

执行代码和收集异步任务，在调用栈空闲时，反复调用任务队列里回调函数执行机制

为什么有事件循环？

JavaScript 是单线程的，为了不阻塞 JS 引擎，设计执行代码的模型

JavaScript 内代码如何执行？

执行同步代码，遇到异步代码交给宿主浏览器环境执行
异步有了结果后，把回调函数放入任务队列排队
当调用栈空闲后，反复调用任务队列里的回调函数

08.宏任务与微任务

讲解

ES6 之后引入了 Promise 对象，让 JS 引擎也可以发起异步任务
异步任务划分为了
- 宏任务：由浏览器环境执行的异步代码
- 微任务：由 JS 引擎环境执行的异步代码
宏任务和微任务具体划分：

事件循环模型

注意：宏任务每次在执行同步代码时，产生微任务队列，清空微任务队列任务后，微任务队列空间释放！

下一次宏任务执行时，遇到微任务代码，才会再次申请微任务队列空间放入回调函数消息排队

总结：一个宏任务包含微任务队列，他们之间是包含关系，不是并列关系

小结

什么是宏任务？

浏览器执行的异步代码
例如：JS 执行脚本事件，setTimeout/setInterval，AJAX请求完成事件，用户交互事件等

什么是微任务？

JS 引擎执行的异步代码
例如：Promise对象.then()的回调

JavaScript 内代码如何执行？

执行第一个 script 脚本事件宏任务，里面同步代码
遇到宏任务/微任务交给宿主环境，有结果回调函数进入对应队列
当执行栈空闲时，清空微任务队列，再执行下一个宏任务，从1再来

例如下面的一个例子（事件循环经典面试题）

// 目标：回答代码执行顺序console.log(1)
setTimeout(() => {
  console.log(2)
  const p = new Promise(resolve => resolve(3))
  p.then(result => console.log(result))
}, 0)
const p = new Promise(resolve => {
  setTimeout(() => {
    console.log(4)
  }, 0)
  resolve(5)
})
p.then(result => console.log(result))
const p2 = new Promise(resolve => resolve(6))
p2.then(result => console.log(result))
console.log(7)

09.Promise.all 静态方法

讲解

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

语法：

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