专业的编程技术博客社区

网站首页 > 博客文章 正文

ES6 中的"承诺"到底承诺了什么

baijin 2024-08-19 11:29:58 博客文章 6 ℃ 0 评论

Promise(承诺)的实例有三个状态,Pending(进行中)、Resolved(已完成)、Rejected(已拒绝),当你把一个工作交给promise处理时,最初的状态就是Pending,任务完成了状态就是Resolved,没有完成状态就是Rejected,当Promise执行的工作符合你预期那么你就调用resolve函数,失败就调用reject函数,这两个函数是通过promise构造函数参数的形式传入promise对象的。例如:

new Promise((resolve,reject)=>{
 reject("reject parameter will be used by catch ");
 console.log("reject in promise constructor")
 
}).catch((err)=>{
 console.log("catch here ")
 console.log(err)
})

Promse.all()在处理多个异步处理时非常有用,例如一个页面上需要等两个或多个网络请求数据回来以后才正常显示,在此之前只显示loading图标,亦或者:当有多个异步工作,但是工作之间并无联系而且没有先后顺序,只要工作全部完成就可以继续下面工作.通俗理解就是大家要共同进退,跑的快的需要等着跑着慢的,等大家都完成了才一起返回.如下:

function printEnter() {
 for (let i = 0; i < 10; i++) {
 console.log(".");
 }
}
let pro1 = new Promise((resolve, reject) => {
 let s = new Date().getTime();
 setTimeout(() => {
 console.log("pro1 consume ", new Date().getTime() - s, "ms")
 resolve("resovle pro1")
 printEnter()
 }, 1000);

})

let pro2 = new Promise((resolve, reject) => {
 let s = new Date().getTime();
 setTimeout(() => {
 console.log("pro2 consume ", new Date().getTime() - s, "ms")
 resolve("resolve pro2")
 printEnter()
 }, 3000);
})

let pro3 = new Promise((resovle, reject) => {
 let s = new Date().getTime();
 setTimeout(() => {
 console.log("pro3 consume ", new Date().getTime() - s, "ms");
 resovle("resolve pro3");
 }, 2000);
})


Promise.all([pro1, pro2, pro3]).then((arr) => {
 console.log(arr);
})

需要特别注意的是,Promise.all()函数执行成功返回的成功结果数组里的数据顺序和Promise.all接收到的数组顺序是一致的,即pro1的结果在前,即便pro1的结果获取的比pro2要晚。这有个好处:在前端开发请求数据的过程中,偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景,使用Promise.all()可以很好的处理这个问题。

Promse.race()顾名思义是竞争的意思,例如Promise.race([pro1, pro2, pro3])里面哪个结果最先获得那么就返回哪个结果,不管结果本身是成功状态还是失败状态,说白了就是看谁跑的快,谁快就返回谁,那么其他的怎么办?答案是其他的就没有机会执行后面的then了.如下:

function printEnter() {
 for (let i = 0; i < 10; i++) {
 console.log(".");
 }
}
let pro1 = new Promise((resolve, reject) => {
 let s = new Date().getTime();
 setTimeout(() => {
 console.log("pro1 consume ", new Date().getTime() - s, "ms")
 resolve("resovle pro1")
 printEnter()
 }, 1000);

})

let pro2 = new Promise((resolve, reject) => {
 let s = new Date().getTime();
 setTimeout(() => {
 console.log("pro2 consume ", new Date().getTime() - s, "ms")
 resolve("resolve pro2")
 printEnter()
 }, 3000);
})

let pro3 = new Promise((resovle, reject) => {
 let s = new Date().getTime();
 setTimeout(() => {
 console.log("pro3 consume ", new Date().getTime() - s, "ms");
 resovle("resolve pro3");
 }, 2000);
})
Promise.race([pro1, pro2, pro3]).then((arr) => {
 console.log(arr)
})

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表