promise 练习题（三）

Promise中的then、catch、finally

需要理解的知识点：

• 1 .then和.catch都会返回一个新的Promise。
• 2 catch不管被连接到哪里，都能捕获上层未捕捉过的错误。
• 3 在Promise中，返回任意一个非 promise 的值都会被包裹成 promise 对象.
• 4 Promise 的 .then 或者 .catch 可以被调用多次, 当如果Promise内部的状态一经改变，并且有了一个值，那么后续每次调用.then或者.catch的时候都会直接拿到该值。
• 5 .then 或者 .catch 中 return 一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获。
• 6 .then 或 .catch 返回的值不能是 promise 本身，否则会造成死循环。
• 7 .then 或者 .catch 的参数期望是函数，传入非函数则会发生值透传。
• 8 .then方法是能接收两个参数的，第一个是处理成功的函数，第二个是处理失败的函数，再某些时候你可以认为catch是.then第二个参数的简便写法。
• 9 .finally方法也是返回一个Promise，他在Promise结束的时候，无论结果为resolved还是rejected，都会执行里面的回调函数。.finally()方法的回调函数不接受任何的参数,它最终返回的默认会是一个上一次的Promise对象值，不过如果抛出的是一个异常则返回异常的Promise对象。
  ————————————————————————————————————————

//1、
const promise = new Promise((resolve, reject) => {
  resolve("success1");
  reject("error");
  resolve("success2");
});
promise
.then(res => {
    console.log("then: ", res);
  }).catch(err => {
    console.log("catch: ", err);
  })

提示

• Promise的状态一经改变就不能再改变。

执行结果

"then: success1"

————————————————————————————————————————

//2、
const promise = new Promise((resolve, reject) => {
  reject("error");
  resolve("success2");
});
promise
.then(res => {
    console.log("then1: ", res);
  }).then(res => {
    console.log("then2: ", res);
  }).catch(err => {
    console.log("catch: ", err);
  }).then(res => {
    console.log("then3: ", res);
  })

提示

• 知识点2 catch不管被连接到哪里，都能捕获上层被捕捉过的错误。

执行结果

"catch: " "error"
"then3: " undefined

————————————————————————————————————————

//3、
Promise.resolve(1)
  .then(res => {
    console.log(res);
    return 2;
  })
  .catch(err => {
    return 3;
  })
  .then(res => {
    console.log(res);
  });

分析

• 知识点3 ，return 2会被包装为return Promise.resolve(2)。

执行结果

1
2

————————————————————————————————————————

//4、
Promise.reject(1)
  .then(res => {
    console.log(res);
    return 2;
  })
  .catch(err => {
    console.log(err);
    return 3
  })
  .then(res => {
    console.log(res);
  });

执行结果

1
3

————————————————————————————————————————

//5、
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('timer')
    resolve('success')
  }, 1000)
})
const start = Date.now();
promise.then(res => {
  console.log(res, Date.now() - start)
})
promise.then(res => {
  console.log(res, Date.now() - start)
})

分析

• 知识点4 Promise 的 .then 或者 .catch 可以被调用多次, 当如果Promise内部的状态一经改变，并且有了一个值，那么后续每次调用.then或者.catch的时候都会直接拿到该值

执行结果

'timer'
success 1001
success 1002

————————————————————————————————————————

//6、
Promise.resolve().then(() => {
  return new Error('error!!!')
}).then(res => {
  console.log("then: ", res)
}).catch(err => {
  console.log("catch: ", err)
})

分析

• 知识点3 在Promise中，返回任意一个非 promise 的值都会被包裹成 promise 对象.

执行结果

"then: " "Error: error!!!"

————————————————————————————————————————

//7、
const promise = Promise.resolve().then(() => {
  return promise;
})
promise.catch(console.err)

分析过程

• 知识点6 then 或 .catch 返回的值不能是 promise 本身，否则会造成死循环。

执行结果

Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>

————————————————————————————————————————

//8、
Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

分析

• 知识点7 .then 或者 .catch 的参数期望是函数，传入非函数则会发生值透传。

执行结果

1

————————————————————————————————————————

//9、
Promise.reject('err!!!')
  .then((res) => {
    console.log('success', res)
  }, (err) => {
    console.log('error', err)
  }).catch(err => {
    console.log('catch', err)
  })

分析过程

• 知识点8 .then方法是能接收两个参数的......

执行结果

'error' 'error!!!'

————————————————————————————————————————

//10、
Promise.resolve()
  .then(function success (res) {
    throw new Error('error!!!')
  }, function fail1 (err) {
    console.log('fail1', err)
  }).catch(function fail2 (err) {
    console.log('fail2', err)
  })

分析过程

• Promise调用的是resolve()，因此.then()执行的应该是success()函数，可是success()函数抛出的是一个错误，它会被后面的catch()给捕获到，而不是被fail1函数捕获。

执行结果

fail2 Error: error!!! at success

————————————————————————————————————————

//11、
Promise.resolve('1')
  .then(res => {
    console.log(res)
  })
  .finally(() => {
    console.log('finally')
  })
Promise.resolve('2')
  .finally(() => {
    console.log('finally2')
    return '我是finally2返回的值'
  })
  .then(res => {
    console.log('finally2后面的then函数', res)
  })

分析过程

• 知识点9

执行结果

'1'
'finally2'
'finally'
'finally2后面的then函数' '2'