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

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

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

then

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

如果這兩個(gè)回調(diào)函數(shù)沒(méi)有寫(xiě)返回值，默認(rèn)會(huì) return undefined;

進(jìn)入下一個(gè)函數(shù)的 onFulfilled 函數(shù)中

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

在這兩個(gè)回調(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"));
    // 等價(jià)于
    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 拋出錯(cuò)誤可以

const p = new Promise((resolve, reject) => {
  resolve(22);
});
p.then(
  (success1) => {
    return new Promise((resolve, reject) => reject("error"));
    // 等價(jià)于
    // 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 會(huì)被自動(dòng)包裝成 return new Promise((resolve) => resolve(xxx));，

catch

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

catch 為什么能捕獲前面的錯(cuò)誤？

在 onRejected 函數(shù)中，如果沒(méi)有顯示拋出錯(cuò)誤，默認(rèn)會(huì) return undefined; 進(jìn)入一下個(gè) onFulfilled 函數(shù)

finally

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

Promise.resolve

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

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

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

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

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

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

具有 then 方法的對(duì)象

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