Promise简介
- es6原生提供的Promise
- Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息
- 简单来讲promise就是用于处理异步任务的
- Promise也可以将异步任务队列化
promise的异步操作状态
- pending: 初始状态,不是成功或失败状态。
- fulfilled: 意味着操作成功完成。
- rejected: 意味着操作失败。
Promise 对象的状态改变,只有两种可能:
从 Pending 变为 Resolved (异步任务成功)
从 Pending 变为 Rejected (异步任务失败)
而且状态发生后,是不会有改变的。
promise缺点
一旦开始执行就无法取消(一旦新建它就会立即执行,无法中途取消)
无法进度追踪 (处于 Pending 状态时,无法得知目前进展到哪一个阶段)
promise使用
可以使用 new 来调用 Promise 的构造器来进行实例化。
let promise = new Promise(function(resolve, reject) {
//promise的入参是一个回调函数,回调函数异步处理成功的回调和异步处理失败的 回调函数分别对应成功的resolve和失败的reject
// 异步处理
setTimeout(function(){
resolve('do something')
// 处理结束后、调用resolve 或 reject
},1000)
});
//也可以采用链式调用的形式去触发他的回调函数
promise.then(res=>{
console.log(res);
})
上述的截图仅仅是异步成功回调的案例,当然如果异步任务错误我们也可以去捕获到
写一个随机数1-10的数,大于5成功回调,反之失败回调
let promise = new Promise(function(resolve, reject) {
// 异步处理
setTimeout(function() {
const num = Math.floor(Math.random() * 10);
if (num > 5) {
resolve('这个值>5');
return;
}
reject('这个值<5');
}, 1000);
});
//也可以采用链式调用的形式去触发他的回调函数
promise.then(res => {
console.log('reslove回调返回值',res);
});
promise.catch(res => {
console.log('reject回调返回值',res);
});
Promise使用场景
图片依次加载
const imgUrl = ['img1', 'img2', 'img3'];
const downloadImgs = async () => {
let promise = url => {
return new Promise((resolve, eject) => {
setTimeout(() => {
console.log(url);
resolve('ok');
}, 1000);
});
};
for (let item of imgUrl) {
await promise(item).then(res => console.log(res));
}
};
promise all 所有异步任务执行完毕后,将结果以数组形式返回
promise race 哪个先异步任务先操作完,就返回哪个异步任务的结果
let checkNum = 1;
const asyncDownload = () => {
return new Promise((reslove, reject) => {
setTimeout(() => {
checkNum++;
reslove(checkNum);
}, 1000);
});
};
const asyncQueue = () => {
//race的调用方法和all一样
Promise.all([asyncDownload(), asyncDownload(), asyncDownload()]).then(
res => {
console.log('res', res);
},
);
};