- 首页 > 睿知 > it技术 > >
Promise|Promise和异步同步
es6javascriptPromise异步同步
- 同步和异步
- 同步：停止等待运行结束，继续后续的运行
- 异步：需要等待一个内容完成后继续执行后面的内容，但是不能将后面的内容写在等待函数外，否则就会同时执行两个
- 图片要进行预加载，否则不会出现图片的宽高。浏览器具有缓存功能
- 异步操作
- 操作性事件 需要时间
- load事件 异步 需要加载
- setTimeout 异步
- setInterval 异步
- requestAnimationFrame 异步
- 注意：async 放在下一帧执行
? defer 所有内容全部加载完成，HTML标签已经完成渲染，给最后执行的代码加
- 宏任务和微任务
- 异步和同步都是在完成任务列的内容
- 同步任务逐条进行
- 固定时间异步：setTimeout setInterval requestAnimationFrame(帧时间固定) Promise
- 非固定时间异步：加载文件和加载图片，通信
- 宏任务和微任务
- setTimeOut setInterval 宏任务
- Promise 微任务
- 宏任务指将当前的任务挪至下一个新的任务列的最顶端执行
- 微任务指将当前任务的内容挪至当前任务列的最底端执行
- 注意：事件抛发都是同步及时触发
- async和await
- async函数执行后返回一个promise对象
- await只能写在async函数中
- await只能处理promise对象的异步等待
- async函数使用return返回的内容可以通过then来获取
- promise
- 【Promise|Promise和异步同步】基本使用方法
-
//实例化promise对象p
var p=new Promise(function(resolve,reject){
var img=new Image();
img.src="https://www.it610.com/article/img/17.jpg";
img.onload=function(){
resolve(img);
//加载成功执行该函数
}
img.onerror=function(){
reject(img.src+"地址错误");
//加载失败执行该函数
}
});
//第一种表示方法
p.then(function(a){
console.log(a);
//执行resolve这个函数
},function(b){
console.log(b);
//执行reject这个函数
})//第二种表示方法
p.then(function(a){
console.log(a);
//执行resolve这个函数
}).catch(function(b){
console.log(b);
//执行reject这个函数
})
- Promise.all方法
-
//getImage方法
function getImage(src) {
return new Promise(function (resolve, reject) {
var img = new Image();
img.src = https://www.it610.com/article/src;
img.onload = function () {
resolve(img);
};
});
}
var arr=[];
for(var i=3;
i<80;
i++){
arr.push(getImage("./img/"+i+"-.jpg"));
}
//统一处理所有的promise数组，并且返回一个列表
Promise.all(arr).then(function(list){//注意是list数组
list.forEach(item=>{
console.log(item.src)
})
})
- 异步列表中谁最先完成就执行谁
-
Promise.race(arr).then(function(img){
console.log(img);
})
- 几种简写方式
-
//成功时
new Promise(function(resolve,reject){
resolve(1);
}).then(function(a){
console.log(a);
})
等价于
//注意是then
Promise.resolve(1).then(function(a){
console.log(a);
})//失败时
new Promise(function(resolve,reject){
reject(1);
}).catch(function(b){
console.log(b);
})
等价于
//注意是catch
Promise.reject(1).catch(function(b){
console.log(b);
})
- 代码执行的顺序
-
//在Promise对象的then和catch中都是异步的，除此之外都是同步
console.log("a");
new Promise(function(resolve,reject){
console.log("b");
resolve(1);
console.log("c");
}).then(function(a){
console.log("d");
}).then(function(){
console.log("e");
})
console.log("f");
//结果是abcfde
- Promise中resolve和reject执行干扰问题
-
function getImage(src) {
return new Promise(function (resolve, reject) {
var img1 = new Image();
img1.src = https://www.it610.com/article/src;
img1.onload = function () {
//只能执行一个，具有排他性
//谁放在前面，就执行那个
resolve(img1);
reject(img1.src+"地址错误");
};
});
}
getImage("./img/3-.jpg").then(function(img){
console.log(img);
}).catch(function(msg){
console.log(msg);
})//解释：PromiseStatus 状态机分为3个
//pending准备状态
//fullfiled执行resolve的状态
//rejected执行reject的状态
// 当你new promise时，会给你一个pending状态，执行到onload时，也就是加载成功时，就会执行resolve方法，PromiseStatus就会变成fullfiled;
再去执行reject方法时，就会判断当前是什么状态，如果不是pending状态，就不会执行reject(img1.src+"地址错误");
。一旦变成 resolved，就不执行reject值
- 红绿灯
-
function setLight(light,time=3000){
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve(light);
},time);
})
}
//方法一
function showLight(){
//开始
setLight("红").then(function(light){
console.log(light);
return setLight("黄",2000);
//返回promise对象
}).then(function(light){
console.log(light);
return setLight("绿",1000);
}).then(function(light){
console.log(light);
showLight();
//从头开始，从红灯开始
})
}
showLight();
//方法二
async function showLight(){
var arr=["红","黄","绿"];
for(var i=0;
i
推荐阅读
