js Promise In Deep All In One

js Promise In Deep All In One

Promise Lifecycle

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

// fetch() promises to complete at some point in the future
const promise = fetch("./books.json");

promise.then(res => {
  // success
}, err => {
  // error
});


promise.then(res => {
  // success
}).catch(err => {
  // error
});

// loading = true;
promise.then(res => {
  // success
}).catch(err => {
  // error
}).finally(() => {
  // loading = false;
});

unsettled

A pending promise is considered unsettled.

1. pending state

The promise is in the pending state as soon as the fetch() function returns it.

settled

Once the promise completes, the promise is considered settled and enters one of two possible states.

1. Fulfilled: The promise has been completed successfully.
2. Rejected: The promise didn’t complete successfully due to either an error or some other cause.

then & thenable

The then() method is present on all promises and takes two arguments.

Any object that implements the then() method in this way is called a thenable.
All promises are thenables, but not all thenables are promises.

fulfillment handler

rejection handler

const promise = fetch("books.json");

// both of fulfillment handler and rejection handler
promise.then(response => {
  // fulfillment
  console.log(response.status);
}, reason => {
  // rejection
  console.error(reason.message);
 });
 
 // only fulfillment handler
 promise.then(response => {
  // fulfillment
  console.log(response.statusText);
 });

// only rejection handler
promise.then(null, reason => {
  // rejection
  console.error(reason.message);
});

catch error

Just know that if you don’t attach a rejection handler to a promise that is rejected, then the JavaScript runtime will output a message to the console, or throw
an error, or both (depending on the runtime).

// shortcut
promise.catch(reason => {
  // rejection
  console.error(reason.message);
});

// is the same as
promise.then(null, reason => {
  // rejection
  console.error(reason.message);
});

settlement handler

finally

The callback passed to finally is called regardless of success or failure.
callbacks do not receive any arguments because it isn’t clear whether the promise was fulfilled or rejected.

Because the settlement handler is called both on fulfillment and. rejection, it is similar (but not the same) to passing the handler for both fulfillment and rejection using then().

const promise = fetch("books.json");

// shortcut
promise.finally(() => {
  // no way to know if fulfilled or rejected
  console.log("Settled");
});

// is similar to
const callback = () => {
  console.log("Settled");
};
promise.then(callback, callback);

The settlement handlers added with finally() do not prevent rejections from outputting an error to the console or throwing an error.
You must still add a rejection handler to prevent the error from being thrown in that case. ⚠️

task & Microtasks

refs

https://attachments.convertkitcdnn2.com/343082/c6984633-5363-4ca2-b662-47b36693c5b2/understanding-javascript-promises.pdf

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---