Promise详解
Posted angel-cloud
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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()
)
以上是关于Promise详解的主要内容，如果未能解决你的问题，请参考以下文章