一、Promise简介
1、Promise是什么?
Promise是一个对象,代表一个异步操作的最终完成或者失败。
2、Promise的状态
pendding:初始状态,既不是成功,也不是失败状态
fulfiled:操作成功
rejected:操作失败
pendding状态的Promise对象,可能会变为fulfiled状态并传递一个值给相应的状态处理方法,也可能变为rejected状态并传递失败信息。
3、Promise的特点
(1)、状态不会受到外界影响,只有异步操作的结果才能决定当前是哪一种状态,其他操作无法改变
(2)、一旦状态改变,就不会再变,任何时候都可以得到这个结果。
4、语法
new Promise ( function( resolve, reject ){ ... })
resolve:将Promise的状态置为fulfiled
reject:将Promise的状态置为rejected
5、Promise缺点
(1)、一旦创建Promise就会立即执行,中途无法取消
(2)、如果不设置回调函数,Promise内部抛出错误不会反应到外部
(3)、处于pennding状态时,无法得知目前进展到哪一步
6、Promise对象的then方法
语法:.( onfulfiled , onrejected)=>{}
then方法有两个参数,都是函数类型,分别为onfulfiled以及onrejected,当Promise的状态为fulfiled时,调用then的onfulfiled方法,当Promise的状态为rejected时,调用then的onrejected方法
onfulfiled函数:成功的回调函数 (value)=> { }
onrejected函数:失败的回调函数 (reason ) => { }
7、一个简单的Promise
new Promise((resolve, reject) => {
setTimeout(() => {
// resolve('成功状态');
reject('失败状态')
}, 300);
}).then((value) => {
console.log(value); //resolve才会输出 成功状态
}, (reason) => {
console.log(reason) //reject才会输出 失败状态
});
二、Promise几种常用方法
1、Promise.resolve()
返回一个给定值解析后的Promise对象。如果参数本身就是一个Promise
对象,则直接返回这个Promise
对象。
栗子:
//使用静态Promise.resolve方法
let promise = Promise.resolve('resolve方法');
promise.then((value) => {
console.log(value) //输出: resolve方法
})
//resolve另外一个promise
let promise1 = Promise.resolve(promise);
promise1.then((value) => {
console.log('resolve另外一个promise:' + value) //输出: resolve另外一个promise:resolve方法
})
2、Promise.reject()
返回一个带有拒绝原因的Promise
对象。
栗子:
let promise = Promise.reject('reject方法');
promise.then((value) => { }, (rejected) => {
console.log(rejected) //输出: reject方法
})
3、Promise.all()
将多个Promise封装成一个新的Promise,成功时返回的是一个结果数组,失败时,返回的是最先rejected状态的值。
使用场景:一次发送多个请求并根据请求顺序获取和使用数据
栗子:
let promise1 = Promise.resolve(1);
let promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise2');
}, 2000);
})
let promise3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise3');
}, 1000);
})
let promise4 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promise4');
}, 1000);
})
let promise5 = Promise.reject('promise5');
Promise.all([promise1, promise2, promise3]).then((values) => {
//三个promise都是成功的,所以会输出一个数组
console.log(values) // [1, "promise2", "promise3"]
})
Promise.all([promise1, promise2, promise3, promise4]).then((values) => {
console.log(values)
}, (reason) => {
//promise4是失败的,所以只会返回promise4的失败结果
console.log(reason) //promise4
})
Promise.all([promise1, promise2, promise3, promise4, promise5]).then((values) => {
console.log(values)
}, (reason) => {
//promise4个promise5都是失败的,但是promise5比promise4最先失败,所以返回promise5的失败结果
console.log(reason) //promise5
})
4、Promise.race()
返回一个 promise,一旦迭代器中的某个promise解决或拒绝,返回的 promise就会解决或拒绝。
简单来说,就是多个Promise中,哪个状态先变为成功或者失败,就返回哪个Promise的值
let promise1 = new Promise((resolve, reject) => {
//setTimeout第三个以后的参数是作为第一个func()
的参数传进去,promise1作为resolve的参数
setTimeout(resolve, 500, 'promise1');
});
let promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'promise2');
});
let promise3 = new Promise((resolve, reject) => {
setTimeout(reject, 500, 'promise3');
});
let promise4 = new Promise((resolve, reject) => {
setTimeout(reject, 100, 'promise4');
});
Promise.race([promise1, promise2]).then((value) => {
console.log(value); //promise2 100 <promise1 500 所以输出: promise2
});
Promise.race([promise3, promise4]).then((value) => {
}, (rejected) => {
console.log(rejected) //promise4 100 < promise3 500 所以输出: promise4
});
Promise.race([promise2, promise3]).then((value) => {
console.log(value) //promise2 100 < promise3 500 所以会走成功状态,输出: promise2
}, (rejected) => {
console.log(rejected)
});
Promise.race([promise1, promise4]).then((value) => {
console.log(value)
}, (rejected) => {
console.log(rejected) //promise4 100 < promise1 500 所以会走失败状态,输出: promise4
});
5、Promise.prototype.catch()
返回一个Promise,并且处理拒绝的情况。
栗子:
let promise = new Promise((resolve, reject) => {
setTimeout(resolve, 500, 'promise');
});
promise.then((value) => {
console.log(value); //promise
throw '抛出一个异常' //通过throw 抛出
}).catch((e) => {
console.log(e) //输出: 抛出一个异常
})
注意:
在异步函数中抛出的错误不会被catch捕获到
let promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
throw '抛出一个异常';
}, 1000)
});
promise1.catch((e) => {
console.log(e) //不会执行
})
在resolve后面抛出的错误会被忽略
let promise2 = new Promise((resolve, reject) => {
resolve()
throw '抛出异常'
});
promise2.catch((e) => {
console.log(e) //不会执行
})