什么是promise
Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。
从语法上说,promise 是一个对象,从它可以获取异步操作的的最终状态(成功或失败)。
Promise是一个构造函数,对外提供统一的
API,自己身上有all、reject、resolve等方法,原型上有then、catch等方法。
Promise的两个特点
-
Promise对象的状态不受外界影响
1)pending 初始状态
2)fulfilled 成功状态
3)rejected 失败状态
Promise 有以上三种状态,只有异步操作的结果可以决定当前是哪一种状态,其他任何操作都无法改变这个状态
-
Promise的状态一旦改变,就不会再变,任何时候都可以得到这个结果,状态不可以逆,只能由
pending变成fulfilled或者由pending变成rejected
使用new来创建一个promise对象
Promise接受一个「函数」作为参数,该函数的两个参数分别是resolve和reject。这两个函数就是就是「回调函数」
resolve函数的作用:在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject函数的作用:在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
const promise = new Promise((resolve, reject) => {
// do something here ...
if (success) {
resolve(value); // fulfilled
} else {
reject(error); // rejected
}
});
Promise的API
then()方法
then 方法就是把原来的回调写法分离出来,在异步操作执行完后,用链式调用的方式执行回调函数。
而 Promise 的优势就在于这个链式调用。我们可以在 then 方法中继续写 Promise 对象并返回,然后继续调用 then 来进行回调操作。
可有两个参数,第一个是成功 resolve 调用的方法,第二个是失败 reject 调用的方法
function rebuy() {
console.log('开始买笔')
var p = new Promise((resolve, reject) => {
setTimeout(() => {
// console.log('买笔失败');
// reject('钱没带够')
console.log('买了笔芯');
resolve('数学作业')
}, 2000)
})
return p
}
function rework(data) {
console.log('开始写作业:' + data)
var p = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('写完作业');
resolve('英语作业')
}, 2000)
})
return p
}
function fn(data) {
console.log('开始写作业:' + data)
var p = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('写完作业')
resolve('A')
}, 2000)
})
return p
}
rebuy().then(rework).then(fn).then(res => {
console.log(res)
})
//结果
//开始买笔
//买了笔芯
//开始写作业:数学作业
//写完作业
//开始写作业:英语作业
//写完作业
all()方法
Promise 的 all 方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调。
比如下面代码,两个个异步操作是并行执行的,等到它们都执行完后才会进到 then 里面。同时 all 会把所有异步操作的结果放进一个数组中传给 then。
function cutUp() {
console.log('挑作业本')
var p = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('挑好购买作业本')
resolve('新的作业本')
}, 2000)
})
return p
}
function boil() {
console.log('挑笔芯')
var p = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('挑好购买笔芯')
resolve('新的笔芯')
}, 5000)
})
return p
}
Promise.all([cutUp(), boil()]).then(res => {
console.log('都挑好了');
console.log(res)
})
//结果
//挑作业本
//挑笔芯
//挑好购买作业本
//挑好购买笔芯
//都挑好了
//(2) ["新的作业本", "新的笔芯"]
race()方法
race 按字面解释,就是赛跑的意思。race 的用法与 all 一样,只不过 all 是等所有异步操作都执行完毕后才执行 then 回调。而 race 的话只要有一个异步操作执行完毕,就立刻执行 then 回调。
注意:其它没有执行完毕的异步操作仍然会继续执行,而不是停止。
这里我们将上面样例的 all 改成 race
function cutUp() {
console.log('挑作业本')
var p = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('挑好购买作业本')
resolve('新的作业本')
}, 8000)
})
return p
}
function boil() {
console.log('挑笔芯')
var p = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('挑好购买笔芯')
resolve('新的笔芯')
}, 5000)
})
return p
}
Promise.race([cutUp(), boil()]).then(res => {
console.log('我先好');
console.log(res)
})
// 挑作业本
// 挑笔芯
// 挑好购买笔芯
// 我先好
// 新的笔芯
// 挑好购买作业本