js 深入原理講解系列-Promise

能看懂這一題你就掌握了 js Promise 的核心原理

不要專業的術語，說人話，講明白！

Q: 輸出下面 console.log 的正確的順序?

const log = console.log;

A:

Promise

不可逆狀態: pending => fullfilled, pending => rejected

Promise.resolve()
Promise.reject()

executor 執行器

thenable 包含 then 的對象，會立即執行 then ?
then

Promise.all
Promise.allSettled
Promise.any
Promise.race
Promise.catch 語法糖 new Promise(null, (err) => reject(err))
Promise.finally 兜底

Promise.try ❓too new for now

try...catch

Promise

let promise = new Promise((resolve, reject) => resolve(`value`));
// let promise = new Promise((resolve, reject) => reject(`error`));

promise.then(function(value) {
  // success, fullfiled ✅ / (resolved ❌)
  console.log(`OK =`, value);
}, function(error) {
  // failure, rejected
  console.log(`Error =`, error);
});
// OK = value

promise = new Promise((resolve, reject) => {
  throw new Error(`promise error!`);
});

promise.then(function(value) {
  // success, fullfiled ✅ / (resolved ❌)
  console.log(`OK =`, value);
}, function(error) {
  // failure, rejected
  console.log(`Error =`, error);
}).catch(err => {
  console.log(`Catch Error =`, err);
});
// Error = Error: promise error!

thenable

const log = console.log;

const thenableOK = {
  then: function(resolve, reject) {
    log(`thenable ✅`);
    resolve(2020);
  },
};

Promise.resolve(thenableOK).then(function(value) {
  log(`value =`, value);
  // 2020
}, function(error) {
  log(`error =`, error);
});

// thenable ✅
// value = 2020
// Promise {<fulfilled>: undefined}

const thenableError = {
  then: function(resolve, reject) {
    log(`thenable ❌`);
    reject(2020);
  }
};

Promise.resolve(thenableError).then(function(value) {
  log(`value =`, value);
}, function(error) {
  log(`error =`, error);
});

// thenable
// error = 2020
// Promise {<fulfilled>: undefined}

refs

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

---

---

©xgqfrms 2012-2020

www.cnblogs.com 發布文章使用：只允許注冊用戶才可以訪問！

---