标签：resolve console 使用 p1 promise reject Promise
1.Promise
promise 是ES6新增异步解决方案
Promise generator ===> ES7 async/await
Promise(承诺) 表示未来的某个时间一定会返回一个结果
Promise 是一个容器,里面包裹了一些异步操作,它表示一个预计会在未来完成的异步操作
PromiseState(promise状态) pending(进行中) fulfilled(已成功) rejected(已失败)
Promise状态变化pending =>fulfilled 或者 pending=>rejected 不可逆的,而且一旦执行成功状态就会凝固 不会在发生其他变化了
Promise实例上 有三个api
then(resolve=>{},reject=>{}) 方法中有两个回调函数 分别表示成功后的回调 和失败后的回调
catch(err=>{}) 在创建或者使用promise的时候,如果代码报错那么会自动的走then.reject 如果在then中没有reject回调,会在catch中进行错误捕获, catch方法也会捕获在then方法中发生任何错误
finally(()=>{}) 无论promise执行成功或者失败,也无论catch方法是否执行, 最终finally都会执行
1.一旦promise创建成功就会立即执行(new Promise())
console.log(1);
let p1=new Promise((resolve,reject)=>{
resolve('1') //成功后的回调
reject('2')//失败后的回调
console.log(2);
})
console.log(p1); //Promise
p1.then((resolve)=>{//异步操作
// resolve 成功后的结果
console.log(3);
console.log("resolve 成功后的结果",resolve);//1
如果成功则不会走reject
},(reject)=>{
// reject失败后的结果
console.log("reject 失败后的结果",reject);//2
})
console.log(4);
上述代码中他们的打印数字顺序是1243，代码从上往下执行，promise里面是同步的，它的then方法是异步的所以放在了最后。
promise的手动报错的方法： throw new Error("手动报错")，打上这个代码手动报错后就会走reject或者catch方法
2.promise错误捕获 catch
在创建或者使用promise的时候,如果代码报错那么会自动的走then.reject 如果在then中没有reject回调,会在catch中进行错误捕获, catch方法也会捕获在then方法中发生任何错误
let p1=new Promise((resolve,reject)=>{
if(1<0){
resolve(1)
}else{
reject(2)
}
})
p1.then((resolve)=>{
throw new Error('手动报错')
console.log('resolve 成功后的结果', resolve);
}).catch((err)=>{
console.log("catch err==>",err);
})
//返回结果是：catch err==> 23.promise.finally方法
无论promise执行成功或者失败,也无论catch方法是否执行, 最终finally都会执行
let p1=new Promise((resolve,reject)=>{
if(1>0){
throw new Error('手动报错')
resolve(1)
}else{
reject(2)
}
})
p1.then((resolve)=>{
console.log('resolve 成功后的结果',resolve);
},(reject)=>{
console.log("reject 失败后的结果",reject);
}).catch(err=>{
console.log("catch err==>",err);
}).finally(()=>{
console.log("finally fin===>");
})
//此时会走reject打印:'reject 失败后的结果 Error: 手动报错'
//同时会走finally打印: finally fin===>2.Promise的API:应用程序接口
1.Promise.resolve
2.Promise.reject
3.Promise.all 全部 :Promise.all方法 参数是多个promise对象组成的数组, 返回值是一个新的promise对象
如果参数中的promise对象都成功就正常返回,并且promiseAll方法中的每一个promise都是并行状态,当全部完成之后就会自动的调用promise.all().then()方法.
如果参数中的promise对象有任意一个没有正常返回,那么整个pAll都会认为是失败的,并且把失败的这个promise对象的返回值直接输出 其他的就不会在继续执行了
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {//模拟异步
resolve("p1")
}, 1000)
});
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {//模拟异步
resolve("p2")
}, 5000)
});
let p3 = new Promise((resolve, reject) => {
setTimeout(() => {//模拟异步
reject("p3")
}, 2000)
});
let pAll = Promise.all([p1, p2, p3]);
pAll.then( resolve => {
console.log("成功后的回调",resolve);//"成功后的回调",["p1", "p2", "p3"]
},
reject => {
console.log("失败后的回调",reject);
})
//由于p3里面返回的是失败的，all方法就会走reject打印:失败后的回调 p3
//如果都是成功则all方法会走resolve打印:成功后的回调 (3) ["p1", "p2", "p3"]4.Promise.race
Promise.race方法返回的也是一个promise对象, race方法谁先有结果就返回谁,无论成功还是失败(成功的就走resolve,失败就会在reject中返回)
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {//模拟异步
reject("p1")
}, 1000)
});
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {//模拟异步
resolve("p2")
}, 5000)
});
let p3 = new Promise((resolve, reject) => {
setTimeout(() => {//模拟异步
resolve("p3")
}, 2000)
});
let pRace = Promise.race([p1, p2, p3]);
pRace.then(
resolve => {
console.log("成功后的回调",resolve);//成功后的回调 p1
},
reject => {
console.log("失败后的回调",reject);//失败后的回调 p1
})
//rece方法是谁先有结果先返回谁，由于p1时间最短所以会走reject打印:失败后的回调 p13.PromiseAPI和应用
1.promise.all方法
需求：有三张图片 ,如果这三张图片都加载完成 那么就直接显示到页面中 否则就不展示
var imgSrc1 = 'https://desk-fd.zol-img.com.cn/t_s1920x1200c5/g5/M00/0B/0D/ChMkJlvfvrWIcWxTAAVwJpEWx6kAAs9wwEITscABXA-520.jpg'
var imgSrc2 = 'https://desk-fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0B/0D/ChMkJlvfwAeIRMZcAAVF6izrBzIAAs9xAMyo3YABUYC824.jpg'
var imgSrc3 = 'https://desk-fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/05/06/ChMkJ1xJk6mIBBi-AAX3ilTYbAcAAujyAEja8wABfei891.jpg'
var imgBox = document.getElementById('imgBox')
var loadImg = (arg) => {
return new Promise((resolve,reject)=>{
// 配置定时器，用来看管是否在一定时间内完成，如果没有就报超时
setTimeout(() => {
reject('超時')
}, 5000);
// 如果一定时间内完成会走以下代码：
// 创建一个img标签
var img = document.createElement('img')
// /当图片标签获得scr属性的时候,图片就开始被加载
img.setAttribute('src',arg)
// 当图片加载完成会触发这个onload回调函数
img.onload = () => {
resolve(img)
}
})
}
// 使用promise的api:all方法，调用三次加载图片函数
//如果都成功了，那么会返回成功后promise的resolve方法，如果有一个失败就会返回失败
Promise.all([loadImg(imgSrc1),loadImg(imgSrc2),loadImg(imgSrc3)]).then(resolve=>{
// resolve==> [图片1,图片2,图片3]
for(var i = 0 ; i < resolve.length ; i++ ){
// 将返回的img标签追加到元素中
imgBox.appendChild(resolve[i])
}
}).catch(err=>{
alert(err)
})2.promise.race方法
需求 有一张图片 ,当这张图片的加载时间超过1s的时候,就不去加载了,并且在页面中显示加载超时,如果1s内完成了加载,那么就在页面中进行展示
var loadingImg = (arg) => {
var src = arg || 'https://desk-fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/05/06/ChMkJ1xJk6mIBBi-AAX3ilTYbAcAAujyAEja8wABfei891.jpg'
return new Promise((reslove,reject)=>{
var img = document.createElement('img')//创建标签
img.setAttribute('src',src)//给img标签添加src属性
img.onload = () => {//图片加载完成会触发这个onload回调函数
reslove(img)
}
})
}
//设置timeOut函数方法
var timeOut = () => {
//设置一个定时器
return new Promise((reslove,reject)=>{
setTimeout(()=>{
reject('图片加载超时')
},2000)
})
}
//使用promise.race方法来判断成功与否，如果2秒内成功就显示照片，否则显示图片超时
Promise.race([loadingImg(),timeOut()]).then(res=>{
document.body.appendChild(res)
}).catch(err=>{
alert(err)
})标签：resolve,console,使用,p1,promise,reject,Promise 来源： https://blog.csdn.net/wgjiayin/article/details/120599463
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。