AJAX 进阶 day4

1.同步代码和异步代码

2.回调函数地狱和 Promise 链式调用

2.1 回调函数地狱

2.2 Promise - 链式调用

2.3 Promise 链式应用

3.async 和 await 使用

3.1 async函数和await

3.2 async函数和await_捕获错误

4.事件循环-EventLoop

4.1 事件循环

4.2 宏任务与微任务- 执行顺序

4.3 总结

5.Promise.all 静态方法

6.案例 - 商品分类

7.案例 - 学习反馈

7.1 完成省市区切换效果

7.2 收集学习反馈数据，提交保存

1.同步代码和异步代码

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

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

小结：

1. 什么是同步代码？

➢ 逐行执行，原地等待结果后，才继续向下执行

2. 什么是异步代码？

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

3. JS 中有哪些异步代码？

➢ setTimeout / setInterval

➢ 事件

➢ AJAX

4. 异步代码如何接收结果？

➢ 依靠回调函数来接收

2.回调函数地狱和 Promise 链式调用

2.1 回调函数地狱

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

缺点：可读性差，异常无法捕获（内层的错误信息，外层无法捕获），耦合性严重，牵一发动全身

案例：

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

2.2 Promise - 链式调用

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

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

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

2.3 Promise 链式应用

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

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

代码：

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

小结：

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

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

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

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

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

➢ 解决回调函数嵌套问题

3.async 和 await 使用

3.1 async函数和await

目标：掌握async和await语法，解决回调函数地狱

定义：

async 函数是 JavaScript 的一种特殊函数，它可以在函数中使用 await 关键字。当你将一个普通函数用 async 关键字修饰后，这个函数默认返回一个 Promise 对象。普通的返回值会被封装成一个 fulfilled 状态的 Promise 对象，而抛出的任何异常都会被封装成 rejected 状态的 Promise 对象。

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

注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）

代码：

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

3.2 async函数和await_捕获错误

语法：

代码：

<script>/*** 目标：掌握async和await语法，解决回调函数地狱* 概念：在async函数内，使用await关键字，获取Promise对象"成功状态"结果值* 注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）*/async function getData() {try {const p = await axios({ url: 'http://hmajax.itheima.net/api/province' })const pname = p.data.list[0]// console.log(p.data.list[0])const c = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })const cname = c.data.list[0]// console.log(c.data.list[0])const a = await axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })const aname = a.data.list[0]console.log(a)// 写入html文档document.querySelector('.province').innerHTML = pnamedocument.querySelector('.city').innerHTML = cnamedocument.querySelector('.area').innerHTML = aname} catch (error) {console.dir(error)}}getData()</script>

捕捉到异常之后，异常后面的代码将不再执行。

4.事件循环-EventLoop

4.1 事件循环

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

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

原理：

调用栈（Call Stack）：
- 调用栈是执行代码的地方。它记录了当前正在执行的函数和函数调用的历史。当一个函数被调用时，它会被压入调用栈中，执行完成后，它会被从栈中弹出。
任务队列（Task Queue 或 Callback Queue）：
- 任务队列用于存放异步任务的回调函数。例如，当 setTimeout 函数的定时器结束时，它的回调函数会被放到任务队列中。
微任务队列（Microtask Queue）：
- 微任务队列存放的是微任务（例如 Promise 的回调函数）。微任务通常比宏任务（如定时器回调）优先级更高。微任务队列的任务会在事件循环的每一轮结束之前执行完毕。

4.2 宏任务与微任务- 执行顺序

异步任务分为：

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

执行顺序：

使用图解-分析代码执行顺序

简单理解：同步就是会被立即执行的代码，而异步会被分配到相应的任务队列进行等待，

当栈处于空闲状态就会先清空微任务队列，再执行宏任务队列。

4.3 总结

1. 什么是宏任务？

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

2. 什么是微任务？

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

3. JavaScript 内代码如何执行？

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

5.Promise.all 静态方法

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

语法：

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

代码演示：

<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>

6.案例 - 商品分类

商品分类

需求：尽可能同时展示所有商品分类到页面上

步骤：

1. 获取所有的一级分类数据
2. 遍历id，创建获取二级分类请求
3. 合并所有二级分类Promise对象
4. 等待同时成功，开始渲染页面

效果图：

代码：

<body><!-- 大容器 --><div class="container"><div class="sub-list"><div class="item"><h3>分类名字</h3><ul><li><a href="javascript:;"><img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" /><p>巧克力</p></a></li><li><a href="javascript:;"><img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" /><p>巧克力</p></a></li><li><a href="javascript:;"><img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" /><p>巧克力</p></a></li></ul></div></div></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** 目标：把所有商品分类“同时”渲染到页面上*  1. 获取所有一级分类数据*  2. 遍历id，创建获取二级分类请求*  3. 合并所有二级分类Promise对象*  4. 等待同时成功后，渲染页面*/axios({url: 'http://hmajax.itheima.net/api/category/top'}).then(result => {// 获取所有一级分类数据console.log(result.data.data)// 遍历id，创建获取二级分类请求, 这里得到的是所有二级分类的promise对象数组const firstObj = result.data.data.map(item => {// console.log(item.id)return axios({url: 'http://hmajax.itheima.net/api/category/sub',params: { id: item.id }})})// console.log(firstObj)// 合并所有二级分类Promise对象const secondObj = Promise.all(firstObj)secondObj.then(result => {console.log(result)// 等待同时成功后，渲染页面const thirdObj = result.map(item => {const dataObj = item.data.data// 这里拼接上一级分类和循环遍历一级分类下的二级分类return `<div class="item"><h3>${dataObj.name}</h3><ul>${dataObj.children.map(i => {return `<li><a href="javascript:;"><img src=${i.picture} /><p>${i.name}</p></a></li>`}).join('')}</ul></div>`}).join('')document.querySelector('.sub-list').innerHTML = thirdObj})})</script>
</body>

7.案例 - 学习反馈

7.1 完成省市区切换效果

步骤：

1. 设置省份数据到下拉菜单
2. 切换省份，设置城市数据到下拉菜单，并清空地区下拉菜单
3. 切换城市，设置地区数据到下拉菜单

页面展示：

代码：

/*** 目标1：完成省市区下拉列表切换*  1.1 设置省份下拉菜单数据*  1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单*  1.3 切换城市，设置地区下拉菜单数据*/// 1.1 设置省份下拉菜单数据axios({url: 'http://hmajax.itheima.net/api/province'
}).then(result => {// result得到省份对象console.log(result)const pnameObj = result.data.list.map(pname => {return `<option value="${pname}">${pname}</option>`}).join('')document.querySelector('.province').innerHTML = '<option value="">省份</option>' + pnameObj
})let pname = ''// 1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
document.querySelector('.province').addEventListener('change', e => {// 获取到当前对象的value值// console.log(e.target.value)pname = e.target.valueaxios({url: 'http://hmajax.itheima.net/api/city',params: { pname }}).then(result => {// result得到城市的对象// console.log(result.data.list)const cnameObj = result.data.list.map(cname => {return ` <option value="${cname}">${cname}</option>`}).join('')document.querySelector('.city').innerHTML = ' <option value="">城市</option>' + cnameObj// 清空地区下拉菜单document.querySelector('.area').innerHTML = '<option value="">地区</option>'})
})// 1.3 切换城市，设置地区下拉菜单数据
document.querySelector('.city').addEventListener('change', e => {// 获取到当前对象的value值// console.log(e.target.value)axios({url: 'http://hmajax.itheima.net/api/area',params: { pname, cname: e.target.value }}).then(result => {// result得到地区的对象// console.log(result.data.list)const anameObj = result.data.list.map(aname => {return `<option value="${aname}">${aname}</option>`}).join('')document.querySelector('.area').innerHTML = '<option value="">地区</option>' + anameObj})
})

7.2 收集学习反馈数据，提交保存

步骤：

1. 监听提交按钮的点击事件
2. 依靠插件收集表单数据
3. 基于 axios 提交保存，显示结果

页面展示：

代码：

/*** 目标2：收集数据提交保存*  2.1 监听提交的点击事件*  2.2 依靠插件收集表单数据*  2.3 基于axios提交保存，显示结果*/// 2.1 监听提交的点击事件
document.querySelector('.submit').addEventListener('click', () => {// 2.2 依靠插件收集表单数据const form = document.querySelector('.info-form')const obj = serialize(form, { hash: true, empty: true })// 得到表单的提交数据，该数据为一个对象// area: "河东区",city: "天津市"console.log(obj)// 2.3 基于axios提交保存，显示结果axios({url: 'http://hmajax.itheima.net/api/feedback',method: 'POST',data: obj}).then(result => {console.log(result)alert(result.data.message)}).catch(error => {console.dir(error)alert(error.response.data.message)})
})