promise是ES6为我们提供解决‘回调地狱’的一种方法,能让代码的可读性更高。先看一个最简单的例子
new Promise( function(resolve, reject) {...} /* executor */ )
//首先我们先new一个 Promise 对象时,并传入一个 executor 函数
然后我们从字面意思上理解一下什么是promise?promise可以翻译成承诺、保证,就是不管事情最后如何,我都会返回一个状态给你,成功(fulfiled)或者失败(rejected),还有一个等待状态(pending)。先看例子
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1000) // 成功以后这个resolve会把成功的结果捕捉到
// reject(1000) // 失败以后这个reject会把失败的结果捕捉到
}, 1000)
console.log(12345)
})
promise.then(res => {
console.log(res) // then里面第一个参数就能拿到捕捉到的成功结果
}, err =>{
console.log(res)// then里面第二个参数就能拿到捕捉到的失败结果
})
打印结果:
12345
1000(一秒以后)
1、then链式操作
Promise对象的then方法返回一个新的Promise对象,因此可以通过链式调用then方法。
then方法接收两个函数作为参数,第一个参数是Promise执行成功时的回调,第二个参数是Promise执行失败时的回调,这个上面的例子说的很明白了,第二个参数捕捉的就是失败的回调。
函数的返回值将被用作创建then返回的Promise对象。这句话应该怎么理解呢?还是上例子:
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1000)
}, 1000)
console.log(12345)
})
promise.then(res => {
console.log(res) // 这个地方会打印捕捉到的1000
return res + 1000 // 这个函数的返回值,返回的就是这个promise对象捕捉到的成功的值
}).then(res => {
console.log(res) //这个地方打印的就是上一个promise对象return的值
})
所以打印顺序应该是:
12345
1000
2000
刚才我们看到了then接受两个参数,一个是成功的回调、一个是失败的回调,看起来好像也不是那么优雅,promise里除了then还提供了catch方法:
2、catch捕捉操作
这个catch就是专门捕捉错误的回调的,还是先看例子:
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(1000) // 失败以后这个reject会把失败的结果捕捉到
}, 1000)
console.log(12345)
})
promise.catch(res => {
console.log(res) // catch里面就能拿到捕捉到的失败结果
})
打印结果:
12345
1000(一秒以后)