一、同步代码和异步代码
1.同步代码
逐行执行,需原地等待结果后,才继续向下执行
2.异步代码
调用后耗时,不阻塞代码继续执行(不必原地等待),在将来完成后触发一个回调函数
3.js中有哪些异步代码
setTimeout/setIntval
事件
Ajax
异步利用回调函数接受结果
二、回调函数地狱
1.需求:
展示默认第一个省,第一个城市,第一个地区在下拉菜单中
2.概念:
在回调函数中嵌套回调函数,一直嵌套下去就形成了回调函数地狱
3.缺点:
可读性差,异常无法捕获,耦合性严重,牵一发动全身
三、Promise-链式调用
1.概念:
依靠then()方法会返回一个新生成的Promise对象特性,继续串联下一环任务,直到结束
2.细节:
then()回调函数中的返回值,会影响新生成的Promise对象最终状态和结果
3.好处
通过链式调用,解决回调函数嵌套问题
四、Promise链式应用
1.目标:
使用Promise链式调用,解决回调函数地狱问题
2.做法:
每个Promise对象中管理一个异步任务,用then返回Promise对象,串联起来
获取Promise对象-.then-return获取新的Promise对象-.then-新的Promise对象-.then
let pname =''
//得到-获取省份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.qs('').innerHTML=areaName
})
五、async函数和await
async函数是使用async关键字声明的函数。async函数是AsyncFunction构造函数的实例,并且其中允许使用await关键字。
async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise。
1.概念
在async函数内,使用await关键字取代then函数,等待获取Promise对象成功状态的结果值
async function getData(){
const pObj= await axios({url:''})
const pname//获取省份名字
const cname=axios({url,params:{pname}})//获取城市名字
}
2.async函数和await捕获错误
try{}catch(error){}
六、事件循环
1.概念:
JavaScript有一个基于事件循环的并发模型,事件循环负责执行代码、收集和处理事件以及执行队列中的子
任务。这个模型与其它语言中的模型截然不同,比如C和Java。
2.作用
为了让耗时代码不耗费时间,设计了事件循环
3.定义:
执行代码和收集异步任务的模型,在调用栈空闲,反复调用任务队列里回调函数的执行机制,就叫事件循环
4.JavaScript内代码执行过程
执行同步代码,遇到异步代码交给宿主浏览器环境执行
异步有了结果后,把回调函数放入任务队列排队
当调用栈空闲后,反复调用任务队列里的回调函数
七、宏任务和微任务
1.异步任务
宏任务:由浏览器环境执行的异步代码,例如:js执行脚本,setTimeout/setInterval,Ajax请求完成事件,用户交互事件
微任务:由js引擎环境执行的异步代码,例如:Promise对象.then()的回调
Promise本身是同步的,而then和catch的 回调函数是异步的
2.执行顺序
先微任务再宏任务
八、Promise.all静态方法
1.概念:
合并多个Promise对象,等待所有同时成功完成(或某一个失败),做后续逻辑
const p=Promise.all([Promise对象,Promise对象,...])
p.then(result=>{
//result结果:[Promise对象成功结果]
}).catch(error=>{
//第一个失败的Promise对象抛出的异常
})