Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示。简单点说,它就是用于处理异步操作的,异步处理成功了就执行成功的操作,异步处理失败了就捕获错误或者停止后续操作。
Promise对象来说,它也有三种状态:
1.pending
初始状态,也称为未定状态,就是初始化Promise时,调用executor执行器函数后的状态。
2.fulfilled
完成状态,意味着异步操作成功。
3.rejected
失败状态,意味着异步操作失败。
它只有两种状态可以转化,即:
操作成功resolve()
pending -> fulfilled
操作失败reject()
pending -> rejected
创建一个Promise实例:
let pro = new Promise( (resolve,reject) => {
if(成功条件){
resolve('succees data'); //resolve函数里面的参数,是当使用链式操作函数then时能获取到
}else{ // 失败条件
reject('fail data');//reject函数里面的参数,是当使用链式操作函数catch时能获取到
}
});
实例化后的Promise对象pro可以进行链式调用,而且这个then()方法
可以接收两个函数作为参数,一个是处理成功后的函数,一个是处理错误结果的函数。
//第一种写法
pro.then((data) => {
//处理成功后的操作
}, (err) => {
//处理失败后的操作
});
catch()方法
和then()方法一样,都会返回一个新的Promise对象,它主要用于捕获异步操作时出现的异常。因此,我们通常省略then()方法的第二个参数,把错误处理控制权转交给其后面的catch()函数。
let pro1 = new Promise( (resolve,reject) => {
reject('出错了'); //人为置为失败,返回一个rejected的Promise实例
});
pro1.then( (data) => { //因为上面人为置为失败了,所以then不执行
console.log("这里是异步操作成功后执行的");
}).catch( (err) =>{
console.log("这里是异步操作失败后执行的:" + err);
});
//最后输出了:
// 这里是异步操作失败后执行的:出错了
Promise实例对象为一个函数的用法:
let ajax = (num) => {
return new Promise ( (resolve,reject) => {
if (num > 5){
resolve("大于5");
}else {
reject("不大于5");
}
})
}
//Promise对象的链式操作
ajax(6).then( (data) => {
console.log(data);
}).catch( (err) => {
console.log(err);
});
//最后输出:
// 大于5
如果有若干个异步任务,需要先做任务1,如果成功,再做任务2,如果中间任何一个任务失败,才不继续进行执行处理函数 。
我们需要串行执行这样的异步任务,就可以写成:(其实就是在then方法中再返回一个Promise实例对象,然后后面就能继续使用then方法进行串行执行任务了。)
let dataJson = {a:1,b:2}
let ajax = () => {
return new Promise ( (resolve,reject) => {
resolve(dataJson);
})
}
//Promise对象的链式操作
ajax().then( (data) => {
console.log(data);
//返回一个Promise实例,方便后面可以继续使用链式操作then和catch
return new Promise( (resolve,reject) => {
resolve(22);
});
//等价于
// return Promise.resolve(22);
}).catch( (err) => {
console.log(err);
}).then( (data2) => { //因为上面又返回了Promise实例,所以还可以使用链式操作
console.log(data2);
});
//最后输出:
// {a:1,b:2}
// 22
返回的这个Promise对象的状态主要是根据Promise实例.then()方法返回的值,大致分为以下几种情况:
1、如果then()方法中返回了一个参数值
,那么返回的Promise将会变成接收状态(fulfilled)。
2、如果then()方法中抛出了一个异常
,那么返回的Promise将会变成拒绝状态(rejected)。
3、如果then()方法调用resolve()方法
,那么返回的Promise将会变成接收状态。
4、如果then()方法调用reject()方法
,那么返回的Promise将会变成拒绝状态。
5、如果then()方法返回了一个未知状态(pending)的Promise新实例
,那么返回的新Promise就是未知状态。
6、如果then()方法没有明确指定的resolve(data)/reject(data)/return data
时,那么返回的新Promise就是接收状态,可以一层一层地往下传递。
例子如下:
let promise2 = new Promise( (resolve, reject) => {
// 置为接收状态
resolve('success');
});
promise2
.then((data) => {
// 上一个then()调用了resolve,置为接收状态fulfilled
console.log('第一个then'); //第一个then
console.log(data); // success
return '2';
})
.then((data) => {
// 此时这里的状态也是fulfilled, 因为上一步返回了一个参数值2
console.log('第二个then'); //第二个then
console.log(data); // 2
// 返回一个rejected的Promise实例
return Promise.reject("把状态置为rejected error");
}, (err) => { //then的第二个函数是捕获错误而执行的
// error
})
.then((data) => {
/* 这里不运行,因为上一步调用reject()方法,那么返回的Promise将会变成拒绝状态 */
console.log('第三个then');
console.log(data);
}, (err) => {//then的第二个函数是捕获错误而执行的
// 此时这里的状态是rejected, 因为上一步使用了reject()来返回值
console.log('出错:' + err); // 出错:把状态置为rejected error
})
.then((data) => {
// 没有明确指定返回值,默认返回fulfilled (如果后面还有then那么就会是接收状态)
console.log('这里是fulfilled态'); //这里是fulfilled态
})
//最后输出:
// 第一个then
// success
// 第二个then
// 2
// 出错:把状态置为rejected error
// 这里是fulfilled态