下载免费网站模板,企业wordpress主题下载地址,wordpress不用php,石家庄网络销售(创作不易#xff0c;感谢有你#xff0c;你的支持#xff0c;就是我前行的最大动力#xff0c;如果看完对你有帮助#xff0c;请留下您的足迹#xff09; 目录
同步代码和异步代码
回调函数地狱
Promise - 链式调用
Promise 链式应用
async函数和await
async函… (创作不易感谢有你你的支持就是我前行的最大动力如果看完对你有帮助请留下您的足迹 目录
同步代码和异步代码
回调函数地狱
Promise - 链式调用
Promise 链式应用
async函数和await
async函数和await_捕获错误
事件循环-EventLoop
认识 - 事件循环EventLoop
事件循环 - 执行过程
总结
宏任务与微任务
宏任务与微任务 - 执行顺序 同步代码和异步代码 同步代码 异步代码 同步代码 逐行 执行需 原地等待 结果 后才继续向下执行 异步代码调用后 耗时 不阻塞代码继续执行不必原地等待在 将来 完成后触发一个 回调函数 回调函数地狱 需求展示默认第一个省第一个城市第一个地区在下拉菜单中 概念在回调函数中 嵌套回调函数 一直嵌套下去就形成了回调函数地狱 缺点可读性差异常无法捕获耦合性严重牵一发动全身 bodyformspan省份/spanselectoption classprovince/option/selectspan城市/spanselectoption classcity/option/selectspan地区/spanselectoption classarea/option/select/formscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript/*** 目标演示回调函数地狱* 需求获取默认第一个省第一个市第一个地区并展示在下拉菜单中* 概念在回调函数中嵌套回调函数一直嵌套下去就形成了回调函数地狱* 缺点可读性差异常无法获取耦合性严重牵一发动全身*/// 1. 获取默认第一个省份的名字axios({url: http://hmajax.itheima.net/api/province}).then(result {const pname result.data.list[0]document.querySelector(.province).innerHTML pname// 2. 获取默认第一个城市的名字axios({url: http://hmajax.itheima.net/api/city, params: { pname }}).then(result {const cname result.data.list[0]document.querySelector(.city).innerHTML cname// 3. 获取默认第一个地区的名字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})})}).catch(error {console.dir(error)})/script
/body
Promise - 链式调用 概念依靠 then() 方法会返回一个 新生成的 Promise 对象 特性继续串联下一环任务直到结束 细节then() 回调函数中的 返回值 会影响新生成的 Promise 对象 最终状态和结果 好处通过链式调用解决回调函数嵌套问题 bodyscript/*** 目标掌握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)/script
/body
Promise 链式应用 目标使用 Promise 链式调用解决回调函数地狱问题 做法每个 Promise 对象中管理一个异步任务用 then 返回 Promise 对象串联起来 bodyformspan省份/spanselectoption classprovince/option/selectspan城市/spanselectoption classcity/option/selectspan地区/spanselectoption classarea/option/select/formscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript/*** 目标把回调函数嵌套代码改成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})/script
/bodyasync函数和await 定义 概念 在 async 函数内使用 await 关键字取代 then 函数等待获取 Promise 对象成功状态的结果值 bodyformspan省份/spanselectoption classprovince/option/selectspan城市/spanselectoption classcity/option/selectspan地区/spanselectoption classarea/option/select/formscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript/*** 目标掌握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()/script
/body
async函数和await_捕获错误 使用 语法 事件循环-EventLoop
认识 - 事件循环EventLoop 概念 原因JavaScript 单线程某一刻只能执行一行代码为了让耗时代码不阻塞其他代码运行设计了事件循环模型 事件循环 - 执行过程 定义执行代码和收集异步任务的模型在调用栈空闲反复调用任务队列里回调函数的执行机制就叫事件循环 总结 1. 什么是事件循环 执行代码 和收集异步任务在调用栈空闲时反复调用任务队列里回调函数执行机制 2. 为什么有事件循环 JavaScript 是单线程的为了 不阻塞 JS 引擎 设计执行代码的模型 3. JavaScript 内代码如何执行 执行同步代码遇到 异步代码 交给 宿主 浏览器环境执行 异步有了结果后把回调函数放入 任务队列排队 当调用栈 空闲 后反复调用任务队列里的回调函数 宏任务与微任务 ES6 之后引入了 Promise 对象 让 JS 引擎也可以发起异步任务 异步任务分为 宏任务 由 浏览器 环境执行的异步代码 微任务 由 JS 引擎 环境执行的异步代码 Promise 本身是同步的而then和catch回调函数是异步的 宏任务与微任务 - 执行顺序
