Ajax笔记

server/2024/12/26 11:21:45/

Ajax入门

01.AJAX 概念和 axios 使用

讲解

  1. 什么是 AJAX ? mdn

    • 使用浏览器的 XMLHttpRequest 对象 与服务器通信

    • 浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页

      请添加图片描述

  2. 什么是服务器？

    • 可以暂时理解为提供数据的一台电脑

  3. 为何学 AJAX ?

    • 以前我们的数据都是写在代码里固定的, 无法随时变化
    • 现在我们的数据可以从服务器上进行获取，让数据变活

  4. 怎么学 AJAX ?

    • 这里使用一个第三方库叫 axios, 后续在学习 XMLHttpRequest 对象了解 AJAX 底层原理
    • 因为 axios 库语法简单，让我们有更多精力关注在与服务器通信上，而且后续 Vue，React 学习中，也使用 axios 库与服务器通信

  5. 接下来讲解 axios 语法，步骤：

  6. 引入 axios.js 文件到自己的网页中

    axios.js文件链接: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

  7. 明确axios函数的使用语法

    axios({url: '目标资源地址'
}).then((result) => {// 对服务器返回的数据做后续处理
})

    注意：请求的 url 地址, 就是标记资源的网址

    注意：then 方法这里先体验使用，由来后续会讲到

  8. 对应代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX概念和axios使用</title>
</head><body><!--axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址：http://hmajax.itheima.net/api/province目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库--><p class="my-p"></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 2. 使用axios函数axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {console.log(result)// 好习惯：多打印，确认属性名console.log(result.data.list)console.log(result.data.list.join('<br>'))// 把准备好省份列表，插入到页面document.querySelector('.my-p').innerHTML = result.data.list.join('<br>') })</script>
</body></html>

小结

  1. AJAX 有什么用？

    答案
    • 浏览器和服务器之间通信，动态数据交互

02.认识 URL

讲解

  1. 为什么要认识 URL ? mdn

    • 虽然是后端给我的一个地址，但是哪部分标记的是服务器电脑，哪部分标记的是资源呢？所以为了和服务器有效沟通我们要认识一下

  2. 什么是 URL ？

    • 统一资源定位符，简称网址，用于定位网络中的资源（资源指的是：网页，图片，数据，视频，音频等等）

  3. URL 的组成?

    • 协议，域名，资源路径（URL 组成有很多部分，我们先掌握这3个重要的部分即可）

      请添加图片描述

  4. 什么是 http 协议 ?

    • 叫超文本传输协议，规定了浏览器和服务器传递数据的格式（而格式具体有哪些稍后我们就会学到）

      请添加图片描述

  5. 什么是域名 ?

    • 标记服务器在互联网当中的方位，网络中有很多服务器，你想访问哪一台，就需要知道它的域名才可以

    请添加图片描述

  6. 什么是资源路径 ?

    • 一个服务器内有多个资源，用于标识你要访问的资源具体的位置

      请添加图片描述

03.URL 查询参数

讲解

  1. 什么是查询参数 ?

    • 携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据

    • 举例：查询河北省下属的城市列表，需要先把河北省传递给服务器

      请添加图片描述

  2. 查询参数的语法 ？

    • 在 url 网址后面用?拼接格式：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
    • 参数名一般是后端规定的，值前端看情况传递即可

  3. axios 如何携带查询参数?

    • 使用 params 选项即可

      axios({url: '目标资源地址',params: {参数名: 值}
}).then(result => {// 对服务器返回的数据做后续处理
})

      查询城市列表的 url地址：http://hmajax.itheima.net/api/city

      参数名：pname （值要携带省份名字）

  4. 需求：获取“河北省”下属的城市列表，展示到页面，对应代码：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>查询参数</title>
</head>
<body><!-- 城市列表: http://hmajax.itheima.net/api/city参数名: pname值: 省份名字--><p></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url: 'http://hmajax.itheima.net/api/city',// 查询参数params: {pname: '辽宁省'}}).then(result => {console.log(result.data.list)document.querySelector('p').innerHTML = result.data.list.join('<br>')})</script>
</body>
</html>

04.常用请求方法和数据提交

讲解

  1. 想要提交数据，先来了解什么是请求方法

    • 请求方法是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作

      请添加图片描述

    • 前面我们获取数据其实用的就是GET请求方法，但是axios内部设置了默认请求方法就是GET，我们就没有写

    • 但是提交数据需要使用POST请求方法

  2. axios 如何提交数据到服务器呢？

    • 需要学习，method 和 data 这2个新的选项了（大家不用担心，这2个学完，axios常用的选项就都学完了）

      axios({url: '目标资源地址',method: '请求方法',data: {参数名: 值}
}).then(result => {// 对服务器返回的数据做后续处理
})

05.axios 错误处理

讲解

  1. 如果注册相同的用户名，则会遇到注册失败的请求，也就是 axios 请求响应失败了，你会在控制台看到如图的错误：

    请添加图片描述

  2. 在 axios 语法中要如何处理呢？

    • 因为，普通用户不会去控制台里看错误信息，我们要编写代码拿到错误并展示给用户在页面上

  3. 使用 axios 的 catch 方法，捕获这次请求响应的错误并做后续处理，语法如下：

    axios({// ...请求选项
}).then(result => {// 处理成功数据
}).catch(error => {// 处理失败错误
})

06.HTTP 协议-请求报文

讲解

  1. 首先，HTTP 协议规定了浏览器和服务器返回内容的格式

  2. 请求报文：是浏览器按照协议规定发送给服务器的内容，例如刚刚注册用户时，发起的请求报文：

    请添加图片描述

  3. 这里的格式包含：

    • 请求行：请求方法，URL，协议
    • 请求头：以键值对的格式携带的附加信息，比如：Content-Type（指定了本次传递的内容类型）
    • 空行：分割请求头，空行之后的是发送给服务器的资源
    • 请求体：发送的资源

07.HTTP 协议-响应报文

讲解

  1. 响应报文：是服务器按照协议固定的格式，返回给浏览器的内容

    请添加图片描述

  2. 响应报文的组成：

    • 响应行（状态行）：协议，HTTP响应状态码，状态信息
    • 响应头：以键值对的格式携带的附加信息，比如：Content-Type（告诉浏览器，本次返回的内容类型）
    • 空行：分割响应头，控制之后的是服务器返回的资源
    • 响应体：返回的资源

  3. HTTP 响应状态码：

    • 用来表明请求是否成功完成

    • 例如：404（客户端要找的资源，在服务器上不存在）

参考文献

  1. 客户端->百度百科
  2. 浏览器解释->百度百科
  3. 服务器解释->百度百科
  4. url解释->百度百科
  5. http协议->百度百科
  6. 主机名->百度百科
  7. 端口号->百度百科
  8. Ajax解释->百度-懂啦
  9. Ajax解释->MDN解释Ajax是与服务器通信而不只是请求
  10. axios->百度(可以点击播报听读音)
  11. axios(github)地址
  12. axios官方推荐官网
  13. axios(npmjs)地址
  14. GET和POST区别->百度百科
  15. 报文讲解->百度百科
  16. HTTP状态码->百度百科
  17. 接口概念->百度百科

AJAX原理

01.XMLHttpRequest - 基础使用

讲解

  1. AJAX 是浏览器与服务器通信的技术，采用 XMLHttpRequest 对象相关代码

  2. axios 是对 XHR 相关代码进行了封装，让我们只关心传递的接口参数

  3. 学习 XHR 也是了解 axios 内部与服务器交互过程的真正原理

请添加图片描述

  1. 语法如下：

    const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {// 响应结果console.log(xhr.response)
})
xhr.send()

    请添加图片描述

  2. 需求：以一个需求来体验下原生 XHR 语法，获取所有省份列表并展示到页面上

  3. 代码如下：

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>XMLHttpRequest_基础使用</title>
</head><body><p class="my-p"></p><script>/*** 目标：使用XMLHttpRequest对象与服务器通信*  1. 创建 XMLHttpRequest 对象*  2. 配置请求方法和请求 url 地址*  3. 监听 loadend 事件，接收响应结果*  4. 发起请求*/// 1. 创建 XMLHttpRequest 对象const xhr = new XMLHttpRequest()// 2. 配置请求方法和请求 url 地址xhr.open('GET', 'http://hmajax.itheima.net/api/province')// 3. 监听 loadend 事件，接收响应结果xhr.addEventListener('loadend', () => {console.log(xhr.response)const data = JSON.parse(xhr.response)console.log(data.list.join('<br>'))document.querySelector('.my-p').innerHTML = data.list.join('<br>')})// 4. 发起请求xhr.send()</script>
</body></html>

02.XMLHttpRequest - 查询参数

讲解

  1. 什么是查询参数：携带额外信息给服务器，返回匹配想要的数据

  2. 查询参数原理要携带的位置和语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

  3. 所以，原生 XHR 需要自己在 url 后面携带查询参数字符串，没有 axios 帮助我们把 params 参数拼接到 url 字符串后面了

  4. 需求：查询河北省下属的城市列表

  5. 核心代码如下：

    /*** 目标：使用XHR携带查询参数，展示某个省下属的城市列表
*/
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=辽宁省')
xhr.addEventListener('loadend', () => {console.log(xhr.response)const data = JSON.parse(xhr.response)console.log(data)document.querySelector('.city-p').innerHTML = data.list.join('<br>')
})
xhr.send()

小结

  1. XHR 如何携带查询参数?

    • 在调用 open 方法的时候，在 url? 后面按照指定格式拼接参数名和值

04.XMLHttpRequest - 数据提交

讲解

  1. 了解原生 XHR 进行数据提交的方式

  2. 需求：通过 XHR 完成注册用户功能

  3. 步骤和语法：

    1. 注意1：但是这次没有 axios 帮我们了，我们需要自己设置请求头 Content-Type：application/json，来告诉服务器端，我们发过去的内容类型是 JSON 字符串，让他转成对应数据结构取值使用

    2. 注意2：没有 axios 了，我们前端要传递的请求体数据，也没人帮我把 JS 对象转成 JSON 字符串了，需要我们自己转换

    3. 注意3：原生 XHR 需要在 send 方法调用时，传入请求体携带

      const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {console.log(xhr.response)
})// 1. 告诉服务器，我传递的内容类型，是 JSON 字符串
xhr.setRequestHeader('Content-Type', 'application/json')
// 2. 准备数据并转成 JSON 字符串
const user = { username: 'itheima007', password: '7654321' }
const userStr = JSON.stringify(user)
// 3. 发送请求体数据
xhr.send(userStr)

  4. 核心代码如下：

    /*** 目标：使用xhr进行数据提交-完成注册功能
*/
document.querySelector('.reg-btn').addEventListener('click', () => {const xhr = new XMLHttpRequest()xhr.open('POST', 'http://hmajax.itheima.net/api/register')xhr.addEventListener('loadend', () => {console.log(xhr.response)})// 设置请求头-告诉服务器内容类型（JSON字符串）xhr.setRequestHeader('Content-Type', 'application/json')// 准备提交的数据const userObj = {username: 'itheima007',password: '7654321'}const userStr = JSON.stringify(userObj)// 设置请求体，发起请求xhr.send(userStr)
})

小结

  1. XHR 如何提交请求体数据?

    • 在 send 中携带请求体数据，要按照后端要求的内容类型携带

04.认识_Promise

讲解

  1. 什么是 Promise ？

    • Promise 对象用于表示一个异步操作的最终完成（或失败）及其结构值

  2. Promise 的好处是什么？

    • 逻辑更清晰（成功或失败会关联后续的处理函数）

    • 了解 axios 函数内部运作的机制

      请添加图片描述

    • 能解决回调函数地狱问题（后面会讲到），今天先来看下它的基础使用

  3. Promise 管理异步任务，语法怎么用？

    // 1. 创建 Promise 对象
const p = new Promise((resolve, reject) => {// 2. 执行异步任务-并传递结果// 成功调用: resolve(值) 触发 then() 执行// 失败调用: reject(值) 触发 catch() 执行
})
// 3. 接收结果
p.then(result => {// 成功
}).catch(error => {// 失败
})

  4. 示例代码：

    /*** 目标：使用Promise管理异步任务
*/
// 1. 创建Promise对象
const p = new Promise((resolve, reject) => {// 2. 执行异步代码setTimeout(() => {// resolve('模拟AJAX请求-成功结果')reject(new Error('模拟AJAX请求-失败结果'))}, 2000)
})// 3. 获取结果
p.then(result => {console.log(result)
}).catch(error => {console.log(error)
})

小结

  1. 什么是 Promise ?

    答案
    • 表示（管理）一个异步操作最终状态和结果值的对象

  2. 为什么学习 Promise ?

    答案
    • 成功和失败状态，可以关联对应处理函数，了解 axios 内部运作的原理

  3. Promise 使用步骤？

    答案
    • 1. new Promise 对象执行异步任务。2. 用 resolve 关联 then 的回调函数传递成功结果。3.用 reject 关联 catch 的回调函数传递失败结果。

05.认识_Promise 的状态

讲解

  1. 为什么要了解 Promise 的三种状态 ？

    • 知道 Promise 对象如何关联的处理函数，以及代码的执行顺序

  2. Promise 有哪三种状态？

    每个 Promise 对象必定处于以下三种状态之一

    1. 待定（pending）：初始状态，既没有被兑现，也没有被拒绝
    2. 已兑现（fulfilled）：操作成功完成
    3. 已拒绝（rejected）：操作失败

    状态的英文字符串，可以理解为 Promise 对象内的字符串标识符，用于判断什么时候调用哪一个处理函数

  3. Promise 的状态改变有什么用：调用对应函数，改变 Promise 对象状态后，内部触发对应回调函数传参并执行

    请添加图片描述

  4. 注意：每个 Promise 对象一旦被兑现/拒绝，那就是已敲定了，状态无法再被改变

参考文档

  1. Ajax原生-mdn
  2. 同步异步-mdn
  3. 回调函数-mdn
  4. Promise-mdn

AJAX进阶

01.同步代码和异步代码

讲解

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

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

  3. 回答代码打印顺序：发现异步代码接收结果，使用的都是回调函数

    const result = 0 + 1
console.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

02.回调函数地狱

讲解

  1. 需求：展示默认第一个省，第一个城市，第一个地区在下拉菜单中

    请添加图片描述

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

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

    axios({ url: 'http://hmajax.itheima.net/api/province' }).then(result => {const pname = result.data.list[0]document.querySelector('.province').innerHTML = pname// 获取第一个省份默认下属的第一个城市名字axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } }).then(result => {const cname = result.data.list[0]document.querySelector('.city').innerHTML = cname// 获取第一个城市默认下属第一个地区名字axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } }).then(result => {document.querySelector('.area').innerHTML = result.data.list[0]})})
})

03.Promise-链式调用

讲解

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

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

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

    请添加图片描述

  4. 按照图解，编写核心代码：

    /*** 目标：掌握Promise的链式调用* 需求：把省市的嵌套结构，改成链式调用的线性结构
*/
// 1. 创建Promise对象-模拟请求省份名字
const p = new Promise((resolve, reject) => {setTimeout(() => {resolve('北京市')}, 2000)
})// 2. 获取省份名字
const p2 = p.then(result => {console.log(result)// 3. 创建Promise对象-模拟请求城市名字// return Promise对象最终状态和结果，影响到新的Promise对象return new Promise((resolve, reject) => {setTimeout(() => {resolve(result + '--- 北京')}, 2000)})
})// 4. 获取城市名字
p2.then(result => {console.log(result)
})// then()原地的结果是一个新的Promise对象
console.log(p2 === p)

小结

  1. 什么是 Promise 的链式调用?

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

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

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

  3. Promise 链式调用有什么用?

    答案
    • 解决回调函数嵌套问题

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

讲解

  1. 目标：使用 Promise 链式调用，解决回调函数地狱问题

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

    请添加图片描述

  3. 按照图解思路，编写核心代码：

    /*** 目标：把回调函数嵌套代码，改成Promise链式调用结构* 需求：获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中
*/
let pname = ''
// 1. 得到-获取省份Promise对象
axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {pname = result.data.list[0]document.querySelector('.province').innerHTML = pname// 2. 得到-获取城市Promise对象return axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})
}).then(result => {const cname = result.data.list[0]document.querySelector('.city').innerHTML = cname// 3. 得到-获取地区Promise对象return axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})
}).then(result => {console.log(result)const areaName = result.data.list[0]document.querySelector('.area').innerHTML = areaName
})

05.async 函数和 await

讲解

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

  2. 做法：使用 async 和 await 解决回调地狱问题

  3. 核心代码：

    /*** 目标：掌握async和await语法，解决回调函数地狱* 概念：在async函数内，使用await关键字，获取Promise对象"成功状态"结果值* 注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）
*/
// 1. 定义async修饰函数
async function getData() {// 2. await等待Promise对象成功的结果const pObj = await axios({url: 'http://hmajax.itheima.net/api/province'})const pname = pObj.data.list[0]const cObj = await axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})const cname = cObj.data.list[0]const aObj = await axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})const areaName = aObj.data.list[0]document.querySelector('.province').innerHTML = pnamedocument.querySelector('.city').innerHTML = cnamedocument.querySelector('.area').innerHTML = areaName
}getData()

    使用 await 替代 then 的方法

小结

  1. await 的作用是什么？

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

06.async 函数和 await 捕获错误

讲解

  1. try 和 catch 的作用：语句标记要尝试的语句块，并指定一个出现异常时抛出的响应

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

    try 里有报错的代码，会立刻跳转到 catch 中

  2. 尝试把代码中 url 地址写错，运行观察 try catch 的捕获错误信息能力

    /*** 目标：async和await_错误捕获
*/
async function getData() {// 1. try包裹可能产生错误的代码try {const pObj = await axios({ url: 'http://hmajax.itheima.net/api/province' })const pname = pObj.data.list[0]const cObj = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })const cname = cObj.data.list[0]const aObj = await axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })const areaName = aObj.data.list[0]document.querySelector('.province').innerHTML = pnamedocument.querySelector('.city').innerHTML = cnamedocument.querySelector('.area').innerHTML = areaName} catch (error) {// 2. 接着调用catch块，接收错误信息// 如果try里某行代码报错后，try中剩余的代码不会执行了console.dir(error)}
}getData()

小结

  1. try 和 catch 有什么作用？

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

07.事件循环

讲解

  1. 事件循环（EventLoop）：掌握后知道 JS 是如何安排和运行代码的

    请回答下面 2 段代码打印的结果，并说明原因

    console.log(1)
setTimeout(() => {console.log(2)
}, 2000)

    console.log(1)
setTimeout(() => {console.log(2)
}, 0)
console.log(3)

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

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

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

    /*** 目标：阅读并回答执行的顺序结果
*/
console.log(1)
setTimeout(() => {console.log(2)
}, 0)
console.log(3)
setTimeout(() => {console.log(4)
}, 2000)
console.log(5)

    具体运行过程，请参考 PPT 动画和视频讲解

    请添加图片描述

08.宏任务与微任务

讲解

  1. ES6 之后引入了 Promise 对象， 让 JS 引擎也可以发起异步任务

  2. 异步任务划分为了

    • 宏任务：由浏览器环境执行的异步代码
    • 微任务：由 JS 引擎环境执行的异步代码

  3. 宏任务和微任务具体划分：

    请添加图片描述

  4. 事件循环模型

    /*** 目标：阅读并回答打印的执行顺序
*/
console.log(1)
setTimeout(() => {console.log(2)
}, 0)
const p = new Promise((resolve, reject) => {resolve(3)
})
p.then(res => {console.log(res)
})
console.log(4)

    请添加图片描述

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

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

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

小结

  1. 什么是宏任务？

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

  2. 什么是微任务？

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

  3. JavaScript 内代码如何执行？

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

请添加图片描述

10.事件循环 - 经典面试题

讲解

  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)

    请添加图片描述

11.Promise.all 静态方法

讲解

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

    请添加图片描述

  2. 语法：

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

  3. 需求：同时请求“北京”，“上海”，“广州”，“深圳”的天气并在网页尽可能同时显示

    请添加图片描述

  4. 核心代码如下：

    html<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Promise的all方法</title>
</head><body><ul class="my-ul"></ul><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** 目标：掌握Promise的all方法作用，和使用场景* 业务：当我需要同一时间显示多个请求的结果时，就要把多请求合并* 例如：默认显示"北京", "上海", "广州", "深圳"的天气在首页查看* code：* 北京-110100* 上海-310100* 广州-440100* 深圳-440300*/// 1. 请求城市天气，得到Promise对象const bjPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '110100' } })const shPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '310100' } })const gzPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440100' } })const szPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440300' } })// 2. 使用Promise.all，合并多个Promise对象const p = Promise.all([bjPromise, shPromise, gzPromise, szPromise])p.then(result => {// 注意：结果数组顺序和合并时顺序是一致console.log(result)const htmlStr = result.map(item => {return `<li>${item.data.data.area} --- ${item.data.data.weather}</li>`}).join('')document.querySelector('.my-ul').innerHTML = htmlStr}).catch(error => {console.dir(error)})</script>
</body></html>

小结

  1. Promise.all 什么时候使用？

    答案
    • 合并多个 Promise 对象并等待所有同时成功的结果，如果有一个报错就会最终为失败状态，当需要同时渲染多个接口数据同时到网页上时使用

参考文献

  1. async和await的mdn讲解

http://www.ppmy.cn/server/153297.html

相关文章

模电_郑益慧_笔记_2_PN结的形成

模电_郑益慧_笔记_2_PN结的形成

载流子的浓度 本征激发的速度与温度相关&#xff1b;复合与载流子浓度相关&#xff1b; 当温度升高时&#xff0c;本征激发加剧&#xff0c;载流子浓度逐渐上升&#xff1b;同时随着载流子浓度上升&#xff0c;复合加剧&#xff0c;载流子浓度逐渐下降&#xff1b;最终&#x…
阅读更多...
浏览器语音视频功能

浏览器语音视频功能

需求: 1:查看当前的语音视频频道的队列状况 2:获取到临时的语音视频用户名 3:跳转到指定的语音聊天房间 lc/Pyfile/Pywebback/app/yuyin/templates/zhuye/base.html <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"…
阅读更多...
部署前后端分离若依项目--Window版本

部署前后端分离若依项目--Window版本

1、准备条件 nssm&#xff0c;nginx&#xff0c;win11&#xff0c;后端jar包&#xff0c;前端html文件&#xff0c;可用的redis与mysql 2、后端启动 1、编写run.bat文件 echo off echo. echo run start echo.cd %~dp0set JAVA_OPTS-Xms256m -Xmx1024m -XX:MetaspaceSize12…
阅读更多...
后端统一接口返回状态【初步模板】

后端统一接口返回状态【初步模板】

后端统一接口返回状态【模板】 文章目录 后端统一接口返回状态【模板】1 .Result类编写2 .Constants类编写3 .更改Controller层下的类return格式 开发过程中&#xff0c;每个接口的返回格式设计都是一样的&#xff0c;这样可以大大提高开发效率。 项目结构如下图&#xff1a;分…
阅读更多...
嵌入式硬件面试题

嵌入式硬件面试题

1、请问什么是通孔、盲孔和埋孔&#xff1f;孔径多大可以做机械孔&#xff0c;孔径多小必须做激光孔&#xff1f;请问激光微型孔可以直接打在元件焊盘上吗&#xff0c;为什么&#xff1f; 通孔是贯穿整个PCB的过孔&#xff0c;盲孔是从PCB表层连接到内层的过孔&#xff0c;埋孔…
阅读更多...
C 进阶 — 文件操作

C 进阶 — 文件操作

C 进阶 — 文件操作 主要内容 文件概述文件打开和关闭文件顺序读写文件随机读写文本文件和二进制文件文件缓冲区 一 文件概述 1.1 使用文件的原因 例 先前通讯录程序&#xff0c;数据存放在内存中&#xff0c;当程序退出时&#xff0c;通讯录中的数据自然就不存在了。如何…
阅读更多...
HDFS与HBase有什么关系？

HDFS与HBase有什么关系？

1 、 HDFS 文件存储系统和 HBase 分布式数据库 HDFS 是 Hadoop 分布式文件系统。 HBase 的数据通常存储在 HDFS 上。 HDFS 为 HBase 提供了高可靠性的底层存储支持。 Hbase 是 Hadoop database ，即 Hadoop 数据库。它是一个适合于非结构化数据存储的数据库， HBase 基于列的…
阅读更多...
GitCode 光引计划投稿 | GoIoT：开源分布式物联网开发平台

GitCode 光引计划投稿 | GoIoT：开源分布式物联网开发平台

GoIoT 是基于Gin 的开源分布式物联网&#xff08;IoT&#xff09;开发平台&#xff0c;用于快速开发&#xff0c;部署物联设备接入项目&#xff0c;是一套涵盖数据生产、数据使用和数据展示的解决方案。 GoIoT 开发平台&#xff0c;它是一个企业级物联网平台解决方案&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023