Promise拋出錯誤解決基礎(chǔ)示例詳解

更新時間：2022年12月15日 09:25:33 作者：uccs

這篇文章主要為大家介紹了Promise拋出錯誤解決基礎(chǔ)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

then

then 函數(shù)的會接收兩個回調(diào)函數(shù)，一個是 onFulfilled 函數(shù)，一個是 onRejected 函數(shù)

如果這兩個回調(diào)函數(shù)沒有寫返回值，默認(rèn)會 return undefined;

進入下一個函數(shù)的 onFulfilled 函數(shù)中

const p = new Promise((resolve, reject) => {
  resolve(22);
});
p.then(
  (success1) => {
    console.log("success1", success1); // "success2" 22
    // 沒寫 return 默認(rèn)返回 return undefined
  },
  (err1) => {
    console.log("err1", err1);
  }
).then(
  (success2) => {
    console.log("success2", success2); // "success2" undefined
  },
  (err2) => {
    console.log("err2", err2);
  }
);

在這兩個回調(diào)中 return xxx ，相當(dāng)于調(diào)用 return new Promise((resolve) => resolve(xxx));

const p = new Promise((resolve, reject) => {
  resolve(22);
});
p.then(
  (success1) => {
    return new Promise((resolve, reject) => resolve("success"));
    // 等價于
    return "success";
  },
  (err1) => {
    console.log("err1", err1);
  }
).then(
  (success2) => {
    console.log("success2", success2); // "success2" "success"
  },
  (err2) => {
    console.log("err2", err2);
  }
);

在 onFulfilled 函數(shù)和 onRejected 函數(shù)中默認(rèn)返回的都是成功，如果需要返回失敗需要顯示調(diào)用 reject 或者用 throw 拋出錯誤可以

const p = new Promise((resolve, reject) => {
  resolve(22);
});
p.then(
  (success1) => {
    return new Promise((resolve, reject) => reject("error"));
    // 等價于
    // throw "error";
  },
  (err1) => {
    console.log("err1", err1);
  }
).then(
  (success2) => {
    console.log("success2", success2);
  },
  (err2) => {
    console.log("err2", err2); // "err2" error
  }
);

總結(jié)：在 then 回調(diào)中 return xxx 會被自動包裝成 return new Promise((resolve) => resolve(xxx));，

catch

catch 是用來處理 rejected 狀態(tài)，是 then 函數(shù)的一種特例，相當(dāng)于 then(null, (err) => {});

catch 為什么能捕獲前面的錯誤？

在 onRejected 函數(shù)中，如果沒有顯示拋出錯誤，默認(rèn)會 return undefined; 進入一下個 onFulfilled 函數(shù)

finally

finally 不管當(dāng)前 promise 是什么狀態(tài)都會執(zhí)行，也是 then 函數(shù)的一種特例，相當(dāng)于 `then(result => result, err => new Promsie((_, reject) => reject(err)));

Promise.resolve

Promise.resolve 是 Promise 在 fulfilled 狀態(tài)時的簡寫，相當(dāng)于 new Promise(resolve => resolve(xxx))

onFulfilled 函數(shù)接收參數(shù)

當(dāng)參數(shù)是普通參數(shù)時，會直接傳遞給后面 then 函數(shù)

new Promise((resolve) => resolve({ name: "uccs" })).then((data) => {
  console.log(data);
});

當(dāng)參數(shù)是 Promise 對象時，后面的 then 會根據(jù)傳遞的 Promise 對象的狀態(tài)變化執(zhí)行哪一個回調(diào)

const p = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, "我執(zhí)行了");
});
new Promise((resolve) => resolve(p)).then((data) => {
  console.log(data);
});

具有 then 方法的對象

const thenable = {
  then(resolve, reject) {
    console.log("thenable");
  },
};
new Promise((resolve) => resolve(thenable)).then((data) => {
  console.log(data);
});