Ⅰ- 壹 - async和await
-
async 函数执行后返回一个Promise对象
-
await只能写在async函数中(
async
和await
必须要一起使用。) -
await 只能处理promise对象的异步等待,在其他的异步方法时候无效,
-
async 函数中使用return返回的内容可以通过then来获取
-
从本质上讲,
await
函数仍然是promise,
一 为什么要用await
为了使我们的异步代码,更像同步的代码
一 基本使用
用法:首先在 function 前面加 async 用来说明这个函数是一个异步函数
然后在async里面写await
await 等待当前async function语句内部语句的执行 await接受promise返回的成功或者失败的内容,若没有返回值则不继续向下执行
- 如果asycn里的代码都是同步的,那么这个函数被调用就会同步执行
async function fn(){
console.log('a')
}
fn()
console.log('b')
//a
//b
- 在await后面接的这个promsie都是同步的,await还是会等待,而Promise没有返回值(成功或者失败),所以await不会继续向下执行,
function fn(){
return new Promise(resolve=>{
console.log(1)
})
}
async function f1(){
await fn();//没有返回结果所以不向下执行
console.log(2)
}
f1()
console.log(3)
//1
//3
- fn属于同步的有返回结果,返回失败的结果所以向下继续执行
function fn() {
return new Promise((resolve, rej) => {
console.log(1)
rej()
}).then(function (a) {
console.log(5)
}, function (a) {
console.log(4)
})
}
async function f1() {
await fn(); //同步堵塞 执行完之后再向下执行
console.log(2)
}
f1()
console.log(3);
//1
//3
//4
//2
- sum变量是等着b()这个函数执行完毕才有值的 ,其实await和promise中的 .then()差不多
async function a(y){
let sum = await b(3,4)
let c= sum+y;
console.log(c)
}
function b (x,y){
return x+y;
}
a(10)
使用promises
,异步函数有两个可能的返回值:已解析的值和被拒绝的值。我们可以.then()
用于正常情况,.catch()
用于特殊情况。
- 利用try…catch,进行错误处理
async function a(y){
try{
let a = await b(3,4)
let c= a+y;
console.log(c)
}catch(err){
console.log(err);
}
}
function b (x,y){
return x+y;
}
a(10,)
二 async和await完成图片预加载
function getImage(src) {
return new Promise(function (resolve, reject) {
var img1 = new Image();
img1.src = src;
img1.onload = function () {
resolve(img1);
};
});
}
async function loadImages(){
var arr=[];
for(var i=3;i<30;i++){
await getImage("./img/"+i+"-.jpg").then(function(img){
arr.push(img);
})
return arr;
}
var p=loadImages();
p.then(function(arr){
console.log(arr);
})
Ⅱ - 贰 - 宏任务和微任务
异步任务分为固定时间任务和非固定时间任务(加载文件和加载文件,ajax通信)
而宏任务和微任务是固定时间的异步任务安排
-
宏任务有:
setTimeOut setInterval -
微任务有:Promise
一 特点
宏任务:指将当前的任务挪至下一个任务列的最顶端执行
微任务:将当前任务列的内容挪至当前任务列的最低端执行
事件抛发都是同步及时触发 的
二 任务优先级
宏任务里面的微任务比微任务里的宏任务优先
微任务里的微任务比微任务优先
案例:
Promise.resolve().then(function () {
console.log("c")
setTimeout(function () {
console.log("b");
}, 0)
})
setTimeout(function () {
console.log("d")
Promise.resolve().then(function () {
console.log("a");
})
}, 0)
图解执行过程:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F0zFzDT6-1596587685343)(C:\Users\幻影旅团\AppData\Roaming\Typora\typora-user-images\image-20200804202700973.png)]
三 案例 红绿灯
1 使用Promise
function setLight(light, time = 1000) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(light);
})
}, time)
}
function showLight() {
setLight("红").then(function (light) {
console.log(light); //打印红
return setLight("黄", 2000);
}).then(function (light) {
console.log(light); //打印红
return setLight("绿", 1000);
}).then(function (light) {
console.log(light); //打印红
showLight();
})
}
showLight();
2 使用async,await
function setLight(light, time = 1000) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(light);
})
}, time)
}
async function showLight() {
var arr = ["红", "黄", "绿"];
for (var i = 0; i < arr.length; i++) {
await setLight(arr[i]).then(function (light) {
console.log(light)
});
}
showLight();
}
showLight();
四 练习宏任务于微任务
new Promise(function (res) {
console.log(1);//---1
res();
Promise.resolve().then(function () {
console.log(2);//---3
});
new Promise(function (res) {
res();
}).then(function () {
console.log(-1);//---4
});
console.log(0);//-----2
})
.then(function () {
console.log(3);//---5
Promise.resolve().then(function () {
console.log(4);//---7
});
})
.then(function () {
console.log(5);//---8
});
Promise.resolve().then(function () {
console.log(6);//---6
Promise.resolve().then(function () {
console.log(7);//----9
});
});
setTimeout(function () {
setTimeout(function () {
console.log(8);//---12
}, 0);
Promise.resolve().then(function () {
console.log(9);//---10
});
}, 0);
setTimeout(function () {
console.log(10);//---11
}, 0);
console.log(1);
new Promise(function (res, rej) {
console.log(2);
res();
})
.then(function () {
console.log(3);
Promise.resolve().then(function () {
console.log(5);
setTimeout(function () {
console.log(6);
Promise.resolve().then(function () {
console.log(7);
});
setTimeout(function () {
console.log(8);
}, 0);
}, 0);
});
})
.then(function () {
console.log(4);
});
setTimeout(function () {
console.log(9);
new Promise(function (res) {
res();
console.log(10);
}).then(function () {
console.log(11);
});
});
Promise.resolve().then(function () {
setTimeout(function () {
Promise.resolve().then(function () {
console.log(12);
});
console.log(13);
}, 0);
});
setTimeout(function () {
setTimeout(function () {
setTimeout(function () {
Promise.resolve().then(function () {
console.log(14);
});
console.log(15);
}, 0);
console.log(16);
}, 0);
console.log(17);
}, 0);
console.log(18);
new Promise(function (res) {
console.log(19);
setTimeout(function () {
console.log(20);
}, 0);
});