1.同步和异步代码
异步代码简单的来说：会耗时，剩余不必原地等待，将来一定时间会回调函数再次触发。
异步函数有 setinterout和setinterval,和事件
异步代码的接收结果依靠回调函数接收的
2.回调函数地狱
概念：一个回调函数嵌套回调函数
缺点：可读性差，异常无法捕获，耦合性严重（牵一发而动全身）
3.promise-链式调用
解决：地狱问题。
案例：要获得辽宁省-大连市-A区。则要在辽宁内的函数下查询市为大连的，又要在大连内查询A 区。
用链式调用可以把嵌套函数变为线性结构！！
分析：获得辽宁省是一个异步事件（需要响应），异步事件需要用promise管理，而当返回成功时会调用then（），而then函数用return会返回一个值，在这个返回的时候加上promise对象。
//1.创建promise对象-请求省份
const p = new promise((resolve,reject) => {
setTimeout(() => {
resolve(北京市')}，2000)
}) //两秒后把北京市作为参数传给resolve，resolve会调用then函数打印出‘北京市’
const p2 = p.then(result => {
conlose.log(result)
//虽然p2接受的市打印出来的北京市但是这个北京市和resolve中的北京市不是同一个对象。
return new promise ((resolve, reject) => {
setTimeout(() => {
resolve(result + '--北京')}， 2000) //已经在第一个promise中获取北京市了，在其调用then要打印出北京市的情况下，并且此时还要返回第二个promise获取的对象市区名北京。
})
})
p2.then(result => {conlose.log(result)})
两个promise的then函数是分开的，不再是嵌套的！！！！
4.async函数和await
作用：更简单的写出基于promise的异步行为，不用刻意链式调用promise。
在async函数中，使用await关键字取代then函数，等待获取promise对象成功状态的结果 值。
//1.定义async函数（要在自定义寒暑假前面加async）
//在axios前面加上await，替代之前promise中的执行成功再调用then()
注意：自定义函数要想打印输出，首先你也要调用一下才能执行啊
async function getDate() {
const pobj = await axios({ url: 'http://hmajax.itheima.net/api/province' }) //要向服务器请求url中信息，await就会收到一个返回的promise对象了
const pname = pobj.data.list[0] //获取返回的省份信息中第一个元素
// console.log(pobj)
// console.log(pname)
document.querySelector('.province').innerHTML = pname //渲染页面省份信
//2.用得到的省份信息作为条件限制去查找市的信息，pramas后面跟着的就是限制信息。
const cobj = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname: pname } })
const cname = cobj.data.list[0]
document.querySelector('.city').innerHTML = cname
//3获取区信息
const aobj = await axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname: pname, cname: cname } })
// console.log(aobj)
const aname = aobj.data.list[0]
document.querySelector('.area').innerHTML = aname
}
getDate()
1.（只有获取成功才会往下执行，否则无法获取。）
2. async function getDate() {
const pobj = await axios({ url: ‘....' })
问题：上面await只是成功才会执行，若是失败呢？
答案：利用try{ //要执行的函数 } catch(error){ //如果出错，则会执行catch函数 }
如果try中某一句出错则下面函数也不会再执行。
5.事件循环 eventloop
如果说在一段代码中，若是同步则直接放入调用栈直接执行。若是异步函数，则先放入宿主环境（浏览器）解析之后（如：是一个两秒的倒计时，则先在此倒计时两秒，再把函数放入任务队 列），再放入任务队列。当调用栈内容执行完成之后再调用任务队列到调用栈执行。
（对于for循环，就要直接放入执行栈，不同放在任务队列）
6.微任务和宏任务
宏任务：由浏览器环境执行的异步代码
例：js脚本，定时器，ajax请求事件，用户交互事件（点击事件等）
微任务:由js引擎环境执行的异步代码
例：promise对象中的then和catch回调函数是异步的。
过程：
对于同步任务，还是放入调用栈直接执行。（promise本身是同步的，只不过promise中then函数是异步的，所以对于promise寒暑假还是先进到调用栈先执行，等执行到result时才进入微任务队列）。
对于以上的宏任务，先进入宿主环境（浏览器）执行，再进入宏任务队列等待被调入调用栈。
对于微任务：直接进入微任务队列。
当调用栈空闲时，先执行微任务内的任务！
7.promise.all静态方法
把多个promise对象合成一个大的新promise对象。若有一个小promise对象失败就会使得大promise失败。
语法：
首先先用axios请求数据，把返回的promise对象再传入数组。
const p = promise.all([promise对象1，promise对象2，promise对象3]）
p.then(result => {}).catch(error => {})
参考阅读
您阅读本篇文章共花了：
发表评论