promise的三种状态解析

promise的三种状态

三种状态

• pending准备 fulfilled成功 rejected失败
• pengding->fulfilled/pending->rejected
• 变化是不可逆的
• pending准备, 不会触发then和catch

• fulfilled成功, 会触发后续的then回调函数

  const p1 = Promise.resolve(100)
  p1 //Promise {<fulfilled>: 100}
  
  p1.then(data => {
    console.log('data', data) //data 100
  }).catch(err => {
    console.error('err', err) //不会执行
  })
  复制代码

• rejected失败，会触发后续的catch回调函数

  const p2 = Promise.reject('err')
  p2 //Promise {<rejected>: 'err'}
  
  p2.then(data => {
    console.log('data', data) //不会执行
  }).catch(err => {
    console.error('err', err) //err err
  })
  复制代码

promise then和catch如何影响状态的转换

• then正常返回resolved,里面有报错则返回rejected

const p1 = Promise.resolve().then(() => {
  return 100         //正常返回resolved
})
p1.then(() => {
  console.log('123')  //123
})

const p1 = Promise.resolve().then(() => {
  throw new Error('then error')   //then error
  //报错返回rejected
})
p1.then(() => {
  console.log('456')  //不执行无输出
}).catch(() => {
  console.error('err100', err)  //err100 err
})
复制代码

• catch正常返回resolved,里面有报错则返回rejected

const p3 = Promise.reject('my error').catch((err) => {
  console.error(err)         //正常返回resolved！触发then回调 
})
p3.then(() => {
  console.log('123')  //123
})

const p4 = Promise.reject('my error').catch((err) => {
  throw new Error('catch error')   //catch error
  //报错返回rejected
})
p1.then(() => {
  console.log('456')  //不执行无输出
}).catch(() => {
  console.error('err100', err)  //err100 err
}) //resolved的promise
复制代码

面试题

//第一题
Promise.resolve().then(() => {
  console.log(1)  //1
}).catch(() => {  //无报错不执行
  console.log(2)
}).then(() => {
  console.log(3)  //3
})//resolved状态

//运行结果：
1
3
复制代码

//第二题
Promise.resolve().then(() => {
  console.log(1)  //1
  throw new Error('erro1')  //rejected状态
}).catch(() => {  //resolved状态
  console.log(2)  //2
}).then(() => {
  console.log(3)  //3
})//resolved状态

//运行结果
1
2
3
复制代码

//第三题
Promise.resolve().then(() => {
  console.log(1)  //1
  throw new Error('erro1')  //rejected状态
}).catch(() => {  //resolved状态
  console.log(2)  //2
}).catch(() => {
  console.log(3)  //无报错不执行
})

//运行结果
1
2
复制代码