Promise详解
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(){
})
