I Promise you a lot of things.

This is the seventh day of my participation in the First Challenge 2022. For details: First Challenge 2022.

Hello, everyone. I am L, and I have recently started to summarize the knowledge points about Promise. This article focuses on the Promise object methods :then, catch, and finally.

The Promise object method — then method

Then methods are methods on Promise objects. It actually puts promise.prototype. then on top of the Promise prototype. Let’s look at some of the methods on the Promise prototype.

console.log(Object.getOwnPropertyDescriptors(Promise.prototype));
Copy the code

Then method receptionTwo parametersOne callback function is Fulfilled (fulfilled) and the other callback function is Rejected (fulfilled).

promise.then(res= > {
  console.log(res);
}, err= > {
  console.log(err);
})
/ / equivalent to the
promise.then(res= > {
  console.log(res);
}).catch(err= > {
  console.log(err);
})
Copy the code

The then method of the same Promise can be called multiple times

When the resolve callback is called, all callbacks in the then methods of the same Promise object are called.

const promise = new Promise((resolve, reject) = > {
resolve('haha')
})

promise.then(res= > {
console.log('res1', res);
})

promise.then(res= > {
  console.log('res2', res);
})

promise.then(res= > {
  console.log('res3', res);
})
Copy the code

The then method itself returns a value, which returns a Promise. If we return a result in the THEN method, the Promise takes that result as an argument to resolve.

Resolve Specifies the difference between different values

(1) If resolve is passed a normal value or object, that value will be used as an argument to the then callback.

new Promise((resolve, reject) = > {
  resolve('normal resolve')
}).then(res= > {
  console.log(res); // normal resolve
})
Copy the code

(2) If resolve passes another Promise, the new Promise determines the state of the original Promise.

new Promise((resolve, reject) = > {
  resolve(new Promise((resolve, reject) = > {
    setTimeout(() = > {
      resolve('Resolve of new Promise')},3000)
  }))
}).then(res= > {
  // Determined by the new Promise passed in resolve
  console.log(res);
})
Copy the code

Wait 3 seconds for output.

(3) If resolve is passed an object that implements the THEN method, the then method is executed and the result of the then method determines the state of the Promise.

new Promise((resolve, reject) = > {
  resolve({
    then: function(resolve, reject) {
      resolve('thenable resolve')
    }
  })
}).then(res= > {
  console.log(res); // thenable resolve
})
Copy the code

In the THEN method, we return different values. The then method returns a new Promise object and takes the value we return as an argument to the resolve callback. We then need to determine the difference between the resolve values described above.

(1) In the then method, when we return a normal value (value/string/object /undefined)

promise.then(res= > {
  Return new Promise((resolve, reject) => {resolve('aaa')}) */
  return 'aaa'
}).then(res= > {
  console.log(res); // aaa
})
Copy the code

(2) When we return a Promise

promise.then(res= > {
Return newPromise ((resolve, reject) => {resolve(newPromise)}) */
  return new Promise((resolve, reject) = > {
    setTimeout(() = > {
      resolve(1111)},3000)
  })
}).then(res= > {
  console.log(res);
})
Copy the code

(3) When we return an object and implement the thenable method.

promise.then(res= > {
/* return new Promise((resolve, reject) => {resolve({then... })}) * /
  return {
    then: function(resolve, reject) {
      resolve(222)
    }
  }
}).then(res= > {
  console.log(res); / / 222
})
Copy the code

The Promise object method — catch method

The catch method is also a method on a Promise object, which is the promise.prototype. catch that is placed on the prototype of a Promise. Like the THEN method, the catch method can be called multiple times.

const promise = new Promise((resolve, reject) = > {
  reject('rejected status')
})

promise.catch(err= > {
  console.log(err);
})

promise.catch(err= > {
  console.log(err);
})

promise.catch(err= > {
  console.log(err);
})

Copy the code

The error-caught callback is also called when executor throws an exception.

const promise = new Promise((resolve, reject) = > {
  // reject('rejected status')
  throw new Error('rejected status')
})

promise.then(undefined.err= > {
  console.log(err);
  console.log('-- -- -- -- -- -);
})
Copy the code

The return value of catch

The catch method also returns a Promise, after which we can call either the then method or the catch method.

The following code is followed by err2 in catch or RES in THEN?

const promise = new Promise((resolve, reject) = > {
  reject(11)
})

promise.catch(err= > {
  console.log('err1', err);
}).catch(err= > {
  console.log('err2', err);
}).then(res= > {
console.log('res', res);
})
Copy the code

The answer is to print res in the then method, and the result of res is undefined. Because the first catch method returns a new Promise, its resolve value is undefined by default. After the execution, the default state is still fulfilled, so the then method is executed.

So what if we want to continue with the catch, we need to throw an exception.

promise.catch(err= > {
  console.log('err1', err);
  throw new Error('error message')
}).then(res= > {
  console.log('res', res);
}).catch(err= > {
  console.log('err2', err);
})
Copy the code

Let’s look at the result of the following code.

const promise = new Promise((resolve, reject) = > {
  reject('111')
})

promise.then(res= > {
  console.log('res', res);
}).catch(err= > {
  console.log('err', err);
  return 'catch return value'
}).then(res= > {
  console.log('res result', res);
}).catch(err= > {
  console.log('err result', err);
})
Copy the code

The catch method catches exceptions in different places

(1) Catch method captures the abnormality of original Poromise.

const promiseA = new Promise((resolve, reject) = > {
  reject('rejected status')
})
promiseA.then(res= > {
  return 111
}).catch(err= > {
  console.log('err',err); // err rejected status
})
Copy the code

(2) The catch method catches the exception thrown by the newly returned Promise.

const promise = new Promise((resolve, reject) = > {
  resolve(111)
})

promise.then(res= > {
  return new Promise((resolve, reject) = > {
    reject(222)
  })
}).catch(err= > {
  console.log('err',err); // err 222
})
Copy the code

Common mistakes

An error occurs when the following code is written. This is because the THEN and catch methods are independent and do not affect each other. When the Reject callback is called, no errors are caught.

const promise = new Promise((resolve, reject) = > {
  reject(111)
})

promise.then(res= > {
  console.log(res);
})

promise.catch(err= > {
  console.log(err);
})
Copy the code

The Promise object method — finally

Finally methods are new to ES9. The finally method accepts no parameters and represents code that will be executed whether the Promise object becomes a pity or reject state.

const promise = new Promise((resolve, reject) = > {
  // resolve('resolve message')
  reject('reject message')
})

promise.then(res= > {
  console.log('res', res);
}).catch(err= > {
  console.log('err', err);
}).finally(() = > {
  console.log('finally');
})
Copy the code

Previous articles 👇👇👇

(1) I Promise you that I will make a Promise to you.

Summary of ES10 and ES11 common knowledge points

Summary of ES7 and ES8 common knowledge points

Summary of ES6 Common Knowledge Points (3)

Summary of ES6 Common Knowledge Points (2)

Summary of ES6 Common Knowledge Points (1)

The 2021 year-end summary of an entry-level front-end programming debugger