Three states of promise

Three states

  • pendingTo preparefulfilledsuccessfulrejectedfailure
  • pengding->fulfilled/pending->rejected
  • The change is irreversible
  • pendingReady, no triggerthenandcatch

  • fulfilledSuccess will trigger a follow-upthenThe callback function 
    const p1 = Promise.resolve(100)
p1 //Promise {<fulfilled>: 100}

p1.then(data= > {
  console.log('data', data) //data 100
}).catch(err= > {
  console.error('err', err) // Will not be executed
})
Copy the code

  • rejectedFailure triggers a follow-upcatchThe callback function 
    const p2 = Promise.reject('err')
p2 //Promise {<rejected>: 'err'}

p2.then(data= > {
  console.log('data', data) // Will not be executed
}).catch(err= > {
  console.error('err', err) //err err
})
Copy the code

How do promise then and catch affect state transitions

  • thenReturn to normalresolvedIf there is an error, returnrejected
const p1 = Promise.resolve().then(() = > {
  return 100         // Return resolved
})
p1.then(() = > {
  console.log('123')  / / 123
})

const p1 = Promise.resolve().then(() = > {
  throw new Error('then error')   //then error
  // Return rejected
})
p1.then(() = > {
  console.log('456')  // No execution no output
}).catch(() = > {
  console.error('err100', err)  //err100 err
})
Copy the code
  • catchReturn to normalresolvedIf there is an error, returnrejected
const p3 = Promise.reject('my error').catch((err) = > {
  console.error(err)         // Return resolved! Trigger the then callback
})
p3.then(() = > {
  console.log('123')  / / 123
})

const p4 = Promise.reject('my error').catch((err) = > {
  throw new Error('catch error')   //catch error
  // Return rejected
})
p1.then(() = > {
  console.log('456')  // No execution no output
}).catch(() = > {
  console.error('err100', err)  //err100 err
}) / / resolved promise
Copy the code

The interview questions

/ / 1
Promise.resolve().then(() = > {
  console.log(1)  / / 1
}).catch(() = > {  // No error is reported
  console.log(2)
}).then(() = > {
  console.log(3)  / / 3
})/ / resolved state

// Result:
1
3
Copy the code


/ / the second question
Promise.resolve().then(() = > {
  console.log(1)  / / 1
  throw new Error('erro1')  / / rejected state
}).catch(() = > {  / / resolved state
  console.log(2)  / / 2
}).then(() = > {
  console.log(3)  / / 3
})/ / resolved state

// Run the result
1
2
3
Copy the code


/ / the third topic
Promise.resolve().then(() = > {
  console.log(1)  / / 1
  throw new Error('erro1')  / / rejected state
}).catch(() = > {  / / resolved state
  console.log(2)  / / 2
}).catch(() = > {
  console.log(3)  // No error is reported
})

// Run the result
1
2
Copy the code