我们先来看一个例子,来了解一下promise使用场景
function funA(callback) {
console.log("A");
setTimeout(() = > {
callback()
}, 100)
}
function funB() {
console.log("B")
}
function funC(callback) {
console.log("C")
setTimeout(() = > {
callback()
}, 1000)
}
function funD() {
console.log("D")
}
function funE() {
console.log("E")
}
Function funF() {
console.log("F")
}
funA(()=>{
funB()
funC(()=>{
funD()
})
funE()
})
funF()
简单易懂的例子
我走到快餐店的柜台前,点了一个起士汉堡。并交了1.47美元的现金。通过点餐和付款,我为得到一个 值(起士汉堡)制造了一个请求。我发起了一个事务。
但是通常来说,起士汉堡不会立即到我手中。收银员交给一些东西代替我的起士汉堡:一个带有点餐排队号的收据。这个点餐号是一个“我欠你”的许诺(Promise),它保证我最终会得到我的起士汉堡。
于是我就拿着我的收据和点餐号。我知道它代表我的 未来的起士汉堡,所以我无需再担心它——除了挨饿!
在我等待的时候,我可以做其他的事情,比如给我的朋友发微信说,“嘿,一块儿吃午餐吗?我要吃起士汉堡”。
我已经在用我的 未来的起士汉堡 进行推理了,即便它还没有到我手中。我的大脑可以这么做是因为它将点餐号作为起士汉堡的占位符号。这个占位符号实质上使这个值 与时间无关。它是一个 未来的值。
最终,我听到,“113号!”。于是我愉快地拿着收据走回柜台前。我把收据递给收银员,拿回我的起士汉堡。 换句话说,一旦我的 未来的值 准备好,我就用我的许诺值换回值本身。
但还有另外一种可能的输出。它们叫我的号,但当我去取起士汉堡时,收银员遗憾地告诉我,“对不起,看起来我们的起士汉堡卖光了。”把这种场景下顾客有多沮丧放在一边,我们可以看到 未来的值 的一个重要性质:它们既可以表示成功也可以表示失败。
每次我点起士汉堡时,我都知道我要么最终得到一个起士汉堡,要么得到起士汉堡卖光的坏消息,并且不得不考虑中午吃点儿别的东西。
我由等待汉堡变成了等到或者等不到,这个过程不可逆。
看完这个例子有没有了解了一点promise的应用场景
promise的知识点
executor是带有 resolve 和 reject 两个参数的函数 。Promise构造函数执行时立即调用executor 函数, resolve 和 reject 两个函数作为参数传递给executor(executor 函数在Promise构造函数返回新建对象前被调用)。resolve 和 reject 函数被调用时,分别将promise的状态改为fulfilled(完成)或rejected(失败)。executor 内部通常会执行一些异步操作,一旦完成,可以调用resolve函数来将promise状态改成fulfilled,或者在发生错误时将它的状态改为rejected。
如果在executor函数中抛出一个错误,那么该promise 状态为rejected。executor函数的返回值被忽略。
executor函数 :new Promise((resolve, reject) => {
reject(1); // rejected
})
new Promise((resolve, reject) => {
reject(1);
})
.then((fullfilled) => {
console.log(fullfilled);
}, (rejected) => {
console.log(rejected, '2-1');
})
.then((fullfilled) => {
console.log(fullfilled, '3-1');
}, (rejected) => {
console.log(rejected, '3-2');
})
.then((fullfilled) => {
console.log(fullfilled, '4-1');
return Promise.reject(5);
}, (rejected) => {
console.log(rejected, '5-1');
})
.catch((error) => {
console.log(error, '6-1');
})
.then(fullfilled => {
console.log(fullfilled, '7-1');
}, rejected => {
console.log(rejected, '7-2');
})
上面例子的结果欢迎在评论区探讨