摘要：初識(shí)對(duì)象是一個(gè)構(gòu)造函數(shù)，其接受一個(gè)函數(shù)作為參數(shù)，為這個(gè)函數(shù)的參數(shù)，函數(shù)內(nèi)部一般為異步執(zhí)行的代碼，作為異步執(zhí)行完成之后成功的回調(diào)，作為異步執(zhí)行拋錯(cuò)的回調(diào)。構(gòu)造函數(shù)可以理解為執(zhí)行異步的過程，其和為執(zhí)行異步調(diào)用結(jié)果的回調(diào)函數(shù)。

Promise對(duì)象是一個(gè)構(gòu)造函數(shù)，其接受一個(gè)函數(shù)作為參數(shù)，resolve、reject為這個(gè)函數(shù)的參數(shù)，函數(shù)內(nèi)部一般為異步執(zhí)行的代碼，resolve作為異步執(zhí)行完成之后成功的回調(diào)，reject作為異步執(zhí)行拋錯(cuò)的回調(diào)。Promise構(gòu)造函數(shù)可以理解為執(zhí)行異步的過程，其resolve和reject為執(zhí)行異步調(diào)用結(jié)果的回調(diào)函數(shù)。

// 代碼1
var p = new Promise((resolve, reject) => {
  // 執(zhí)行一系列的異步執(zhí)行
  // some codes...
  if (true) {
    resolve("異步執(zhí)行成功");
  } else {
    reject("異步執(zhí)行拋錯(cuò)");
  }
}); // fulfilled: 異步執(zhí)行成功 ; 非fulfilled: 異步執(zhí)行拋錯(cuò)

Promise構(gòu)造函數(shù)返回一個(gè)異步執(zhí)行之后的promise對(duì)象，該對(duì)象對(duì)異步的結(jié)果進(jìn)一步處理。

// 代碼2
p
  .then((res) => {
    // try catch 手動(dòng)拋錯(cuò)
    try {
      // console.log("異步返回成功狀態(tài)");
      throw Error("錯(cuò)誤代碼");
    } catch(e) {
      console.log("執(zhí)行catch");
      return Promise.reject(e);
    }
  })
  .catch((res) => {
    console.log(res); // 輸出上一個(gè) then 中 catch 的 e
    return "這里由錯(cuò)誤信息過去的數(shù)據(jù)";
  })
  .then((res) => {
    console.log(res); // 若上一個(gè)catch執(zhí)行，輸出：這里由錯(cuò)誤信息過去的數(shù)據(jù)
  })

以上代碼執(zhí)行結(jié)果：

# 結(jié)果1
執(zhí)行catch
Error: 錯(cuò)誤代碼
    at p.then (**/promise.js:77:10)
    at process._tickCallback (internal/process/next_tick.js:109:7)
    at Module.runMain (module.js:607:11)
    at run (bootstrap_node.js:423:7)
    at startup (bootstrap_node.js:147:9)
    at bootstrap_node.js:538:3
這里由錯(cuò)誤信息過去的數(shù)據(jù)

由代碼2可以看出，promise對(duì)象狀態(tài)為resolve的時(shí)候，執(zhí)行then方法，而且在不拋錯(cuò)情況下會(huì)持續(xù)執(zhí)行鏈?zhǔn)秸{(diào)用的then方法，若then方法拋出異?；蛘邟伋龇祷?b>Promise.reject()方法，會(huì)轉(zhuǎn)到執(zhí)行catch方法，若catch方法返回的不是Promise.reject()方法或者不拋出異常，則所有使用return返回的數(shù)據(jù)都會(huì)作為參數(shù)傳給下一個(gè)then函數(shù)參數(shù)的參數(shù)，即代碼2中的最后一個(gè)then方法指定函數(shù)參數(shù)的res是上一個(gè)catch所return的數(shù)據(jù)。

var p = new Promise((resolve, reject) => {
  resolve("ok");
});
p.then((msg) => {
  console.log(msg);
  return Promise.reject("then01拋錯(cuò)");
}).catch((errMsg) => {
  console.warn(errMsg);
}).then(() => {
  console.log("then02再執(zhí)行");
}).then(() => {
  console.log("then03再執(zhí)行");
  return Promise.reject("then03拋錯(cuò)");
}).catch((errMsg) => {
  console.warn(errMsg);
  return "catch02 return 給下一個(gè)then指定方法的值";
}).then((msg) => {
  console.log(msg);
});

運(yùn)行結(jié)果如下：

這是因?yàn)?b>then方法和catch方法返回的都是一個(gè)promise對(duì)象。then方法指定的回調(diào)函數(shù)拋出錯(cuò)誤會(huì)被下一個(gè)catch方法捕獲，多個(gè)then方法執(zhí)行也是如此。catch方法會(huì)捕獲上一個(gè)catch方法（如果有的話）之后拋錯(cuò)的錯(cuò)誤。

換言之，無論是then方法還是catch方法,返回的都是一個(gè)promise對(duì)象，其狀態(tài)取決于上一個(gè)方法指定的函數(shù)是否順利執(zhí)行或者沒有返回Promise.reject（）。

一旦Promise的狀態(tài)變?yōu)閞esolved或者rejected，就會(huì)永久保持該狀態(tài)，不會(huì)再變。

var p = new Promise((resolve, reject) => {
  resolve("ok");
  throw new Error("wrong");
});
p.then((msg) => {
  console.log(msg);
}).catch((errMsg) => {
  console.warn(errMsg);
});

// ok

在Promise的參數(shù)函數(shù)中，由于先斷定了resolved狀態(tài)，所以在之后只會(huì)執(zhí)行then函數(shù)，后面拋出的錯(cuò)誤會(huì)等于沒拋出來。

另外，“事件循環(huán)”會(huì)對(duì)拋出的結(jié)果有影響。

var p = new Promise((resolve, reject) => {
  resolve("ok");
  setTimeout(() => {
    throw new Error("wrong");
  }, 0);
});
p.then((msg) => {
  console.log(msg);
}).catch((errMsg) => {
  console.warn(errMsg);
});

// ok

// 瀏覽器拋出的錯(cuò)誤
// index.js:4 Uncaught Error: wrong
//    at setTimeout (index.js:4)
// setTimeout    @    index.js:4

在本輪“事件循環(huán)”中，promise對(duì)象p先執(zhí)行，所以構(gòu)造函數(shù)Promise的指定函數(shù)先輸出‘ok’；在進(jìn)入到下一次的“事件循環(huán)”的時(shí)候，由于Promise函數(shù)體已經(jīng)執(zhí)行完畢，故后面拋出的錯(cuò)誤是在Promise函數(shù)體外拋出的，Promise函數(shù)體無法捕獲到這個(gè)錯(cuò)誤。

Promise.resolve()接受一個(gè)參數(shù)，其返回一個(gè)promise對(duì)象的狀態(tài)會(huì)因?yàn)閭魅氲膮?shù)的不同而不同。

空

返回一個(gè)狀態(tài)為resolved的promise對(duì)象，也就是下一步會(huì)執(zhí)行then方法。

var p = Promise.resolve();

p.then((res) => {
  console.log("then");
}).catch((res) => {
  console.log("catch");
});

// then

thenable對(duì)象

var thenable = {
  then: function (resolve, reject) {
    console.log("立即執(zhí)行thenable的then的方法" + Date.now());
    resolve("斷定之后的信息");
  }
}

var p = Promise.resolve(thenable);

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

// 立即執(zhí)行thenable的then的方法1494485393447
// 斷定之后的信息

// 相當(dāng)于

var p = new Promise(function (resolve, reject) {
  console.log("立即執(zhí)行thenable的then的方法" + Date.now());
  resolve("斷定之后的信息");
});

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

// 立即執(zhí)行thenable的then的方法1494485454503
// 斷定之后的信息

thenable對(duì)象作為參數(shù)，在執(zhí)行Promise.resolve(thenable)方法的時(shí)候，會(huì)立即執(zhí)行thenable對(duì)象中的then方法，并且其返回的Promise對(duì)象的狀態(tài)取決于thenable對(duì)象的then方法執(zhí)行的是resolve()還是reject()。這種情況下，就相當(dāng)于Promise構(gòu)造函數(shù)以thenable對(duì)象的then方法作為參數(shù)，實(shí)例化一個(gè)Promise實(shí)例。

一個(gè)非Promise對(duì)象，且不含有then方法的對(duì)象------非thenable對(duì)象

var p = Promise.resolve({
  a: 1
});
p.then((res) => {
  console.log(res);
});

// { a: 1 }

var p01 = Promise.resolve("Hello Promise!");
p01.then((res) => {
  console.log(res);
});

// Hello Promise!

這種情況下，Promise.resolve()的狀態(tài)為resolved，其接收的參數(shù)會(huì)作為then方法指定函數(shù)的參數(shù)。

Promise對(duì)象

var p01 = new Promise((resolve, reject) => {
  reject("Throw some error! Come on! You bite me.");
});

var p = Promise.resolve(p01);

p.then((res) => {
  console.log("這是then方法");
}).catch((errMsg) => {
  console.log(errMsg);
});

// Throw some error! Come on! You bite me.

傳入的是一個(gè)Promise對(duì)象，Promise.resolve()返回的對(duì)象的狀態(tài)就是傳入的Promise對(duì)象的狀態(tài)。

Promise.reject(reason)方法同樣返回一個(gè)狀態(tài)為rejected的Promise對(duì)象實(shí)例。值得注意的是，參數(shù)reason(Promise狀態(tài)rejected的原因)不論是什么值，都會(huì)傳給返回的Promise對(duì)象的catch方法指定的函數(shù)作為參數(shù)。

var p = Promise.reject("Throw some error! Come on! You bite me.");

p.then((res) => {
  console.log("這是then方法");
}).catch((errMsg) => {
  console.log(errMsg);
});

// Throw some error! Come on! You bite me.

var imgPromise = function (url) {
  return new Promise((resolve, reject) => {
    var img = new Image();
    img.src = url;
    img.onload = resolve;
    img.onerror = reject;
  });
}
imgPromise("http://imgurl")
  .then((res) => {
    console.log("圖片加載完成");
  })
  .catch((res) => {
    console.log("圖片加載失敗");
  })：

參考文章