1、什么是promise
Promise是异步执行 可以解决回调地域
2、promise的作用和应用场景
作用:异步执行 解决回调地域(函数一层一层的嵌套,导致不知道执行到哪一步了,而我们需要执行某层函数的时候跳出来执行)
应用:基本上都是带有这种onload特性的,就是我去干一件事等一会儿以后我再去执行,如img.onload=function(){},以及promise的ajax等。
promise的其他应用:事件loop(异步过程中也是有分别的,比如setTimeout是一种异步,promise也是一种异步,他们的区别在哪,面试很重要)
同步://同步执行 一步一步的向下执行
当前DOM元素还未加载完成
例:<script src="./js/a.js"></script>
<script src="./js/a.js"></script>
<body>
//DOM元素
</body>
异步://异步执行 各自执行 执行完后各自去处理
当前DOM元素全部加载完了(执行完了),但是img和link这些还没有加载完,只是标签都加载完了
例:<script src="./js/a.js"></script>
<script src="./js/a.js" async defer></script>
<body>
//DOM元素
</body>
async 表示js加载完成后就执行,不会停下来,而是直接向后继续运行(body),但此时可能body中还有些东西b.js调用不了,这时候就用到了defer。
defer 表示页面中所有的DOM元素都已经加载完成(包括图片),再执行。
async和defer解决异步的缺陷:
同时异步加载多张图片或者同时异步加载多个js文件会造成暂时性假死,会卡顿,导致所有css的link连接还有所有图片将会停止加载,而且假死完成后不恢复;于是有了promise
3、promise的基本使用
var promise=new Promise(function(resolve,reject){
var img=new Image();
img.src="img/3.jpg";
//一旦执行了resolve或者是reject就不会再执行了另一个了
img.onload=function(){
resolve(img); //resolve是指加载成功时执行
};
img.onerror=function(){
reject("加载错误") //reject是指加载失败时执行
}
})
4、promise的then 方法:
//then中的两个参数:fn1代表执行成功的函数resolve,fn2代表执行失败的函数reject
//promise.then(fn1(),fn2())}
promise.then(fn1(img){
console.log(img); //img参数是resolve中传过来的参数
},fn2(txt){
console.log(txt); // txt参数是reject中传过来的错误提示字符串
})}
promise吃相好一点的写法:
function loadImg(_src){
return new Promise(function(res,rej){
var img=new Image();
img.src=_src;
img.onload=function(){
res(img);
};
img.onerror=function(){
rej("加载错误");
}
});
}
loadImg("./img/3-.jpg").then(function(img){
console.log(img);
}).catch(function(){
//catch函数中的函数就是reject执行的内容
})
5、Promise链式加载
var arr=[];
//Promise链式加载
loadImg("./img/3-.jpg").then(function(img){
arr.push(img);
return loadImg("./img/4-.jpg");
// .then中返回之前我们定义的promise,这时出去后依然可以继续使用 .then方法去继续加载新的图片
}).then(function(img){
arr.push(img);
return loadImg("./img/5-.jpg");
}).then(function(img){
arr.push(img);
return loadImg("./img/6-.jpg");
}).then(function(img){
arr.push(img);
console.log(arr);
})
6、Promise中的promise.all()方法:
var arr=[];
for(var i=3;i<80;i++){
arr.push(loadImg("img/"+i+"-.jpg"));
}
//全部加载完成后 而且加载时是按照先后顺序加载的,不会乱序
Promise.all(arr).then(function(list){
list.forEach(function(item){
console.log(item.src);
})
})
7、Promise中的promise.race()方法:
//谁先加载进来就是谁
Promise.race(arr).then(function(img){
console.log(img);
})
8、Promise中的promise.resolve()方法:
Promise.resolve().then(function(){
})
// 等同于下两句话
var pro=new Promise(function(res,rej){
res();
})
pro.then(function(){
})
9、Promise中的promise.reject方法:
Promise.reject().then(function(){
})
// 等同于下两句话
var pro=new Promise(function(res,rej){
rej();
})
pro.catch(function(){
})