ES6 Promise对象学习记录
学习网站:https://es6.ruanyifeng.com/#docs/promise, 阮一峰大大介绍ES6的博客
1.基本用法
Promise构造函数接受一个函数(function)作为参数,该函数的两个参数分别为resolve和reject,它们是两个函数,由JavaScript引擎提供。
const promise = new Promise((resolve, reject) => {
if(/*异步操作成功*/) {
resolve('success');//更改为resolved状态
}
else {
reject('error');//更改为rejected状态
}
});
2.then方法的使用
then方法接受两个函数(function)作为参数,第一个是resolve状态下的回调函数,第二个是reject状态下的回调函数。当promise状态为resolved或rejected时,会执行相应的then方法。
//...续上面代码
promise.then(resolveValue => {
console.log(resolveValue);//success 当promise为resolved状态
}, error => {
console.log(error);//error 当promise为rejected状态
});
then方法的第二个参数可以省略,并且then方法返回的是一个新的Promise对象,这意味着then方法可以嵌套使用。
promise.then(resolveValue => {
console.log(resolveValue);//success
return 'second success';
})
.then((value) => {
console.log(value);//second success
});
可以看到第二个then方法中回调函数的参数接收了上一个then方法回调函数的返回值。
then方法回调函数的返回值可以是一个Promise对象,这时后一个回调函数,就会等待该Promise
对象的状态发生变化,才会被调用。
promise.then(resolveValue => {
return new Promise(resolve => {
setTimeout(() => {
resolve(resolveValue);//3s后状态变为resolved,执行下一个then方法
},3000);
});
})
.then(value => {
console.log(value);//success
});
3.catch方法的使用
catch方法可以捕获catch前的所有promise对象抛出的异常。
promise.then(value => {
console.log(value + x);//这里出现了错误,因为x未定义
})
.catch(err => {
console.log('oh no', err);//oh no ReferenceError: x is not defined
});
catch其实可以看作特殊的then方法:
promise.then(value => {
console.log(value + x);//这里出现了错误,因为x未定义
})
.then(null, err => {
console.log('oh no', err);//oh no ReferenceError: x is not defined
});
如果 Promise 状态已经变成resolved
,再抛出错误是无法捕获的。
const promise = new Promise((resolve, reject) => {
resolve('success');
throw new Error('error');//此时状态已经变为resolved
})
.then(value => {
console.log(value);
})
.catch(e => {
console.log(e);//success
});
先抛出异常则会捕捉到异常:
const promise = new Promise((resolve, reject) => {
throw new Error('error');
resolve('success');
})
.then(value => {
console.log(value);
})
.catch(e => {
console.log(e);//Error: error
});
一般来说,不要在then方法里定义reject状态的回调函数(即then的第二个参数),总是使用catch方法。
// bad
promise.then(function(data) {
// success
}, function(err) {
// error
});
// good
promise
.then(function(data) {
// success
})
.catch(function(err) {
// error
});
执行完catch方法指定的回调函数,会接着运行后面的then方法指定的回调函数。如果没有错误,则跳过catch方法。
promise.then(value => {
console.log(value + x);
})
.catch(e => {
console.log(e);// ReferenceError: x is not defined
})
.then(() => {
console.log('go on');// go on
});
4.finally方法的使用
finally方法用于指定不管Promise对象最后的状态如何,都会执行的操作。finally方法的回调函数不接受任何参数。
promise.then(result => {···})
.catch(error => {···})
.finally(() => {···});
finally本质上是then方法的特例。
promise.finally(() => {
//some code
});
// 等同于
promise.then(result => {
//some code
return result;
}, error => {
//some code
throw error;
})
上面代码中,如果不使用finally方法,同样的语句需要为成功和失败两种情况各写一次,有了finally方法,则只需要写一次。