白嫩娇妻被交换经过_被弄出白浆喷水了视频_亚洲依依成人_小蝌蚪视频污下载

當前位置: 首頁 / 技術干貨 / 正文
前端技術干貨-Promise的相關介紹

2023-03-28

promise  ■ 失敗

前端技術干貨-Promise的相關介紹

  ●Promise

  是一種異步代碼的封裝方案

  因為換了一種封裝方案, 不需要安裝回調函數的方式去調用, 需要按照 promise 的形式去調用

  注意 promise 不是解決 異步問題的, 而是解決回調地獄問題的

  ●認識 Promise

  ○promise 的三種狀態

  ■持續: pending

  ■成功: fulfilled

  ■失敗: rejected

  ○promise 的兩種轉換

  ■從持續轉為成功

  ■從持續轉為失敗

  ○promise 的基礎語法

  ■ES6 內置構造函數

  ○promise 的語法

  ■const p = new Promise(function () {})

  ○promise 對象可以觸發的兩個方法

  ■p.then(函數); 成功時執行

  ■p.catch(函數); 失敗時執行

  ●promise 封裝一個異步函數

  const p = new Promise(function (resolve, reject) {

  // resolve: 是一個形參, 名字自定義, 值是一個函數, 當你調用的時候, 會把當前 promise 的狀態轉換為 成功

  // reject: 是一個形參, 名字自定義, 值是一個函數, 當你調用的時候, 會把當前 promise 的狀態轉換為 失敗

  // resolve 和 reject 調用時可以傳遞一個參數, 這個參數會被傳遞給對應的 then catch

  const timer = Math.ceil(Math.random() * 3000) + 2000;

  setTimeout(() => {

  if (timer > 3500) {

  console.log("買水失敗, 耗時 ", timer);

  reject("獎勵一個bug");

  } else {

  console.log("買水成功, 耗時: ", timer);

  resolve("送你十個bug");

  }

  }, timer);

  });

  p.then(function (address) {

  console.log("班長買水成功咯~~~", address);

  });

  p.catch(function (address) {

  console.log("班長買水失敗咯~~~", address);

  });

  封裝 promise 為函數

  function fn() {

  const p = new Promise(function (resolve, reject) {

  const timer = Math.ceil(Math.random() * 3000) + 2000;

  setTimeout(() => {

  if (timer > 3500) {

  reject("班長買水失敗");

  } else {

  resolve("班長買水成功");

  }

  }, timer);

  });

  return p;

  }

  // 將來在使用的時候 res 得到的是 promise 的實例對象 p

  const res = fn();

  res.then(function (type) {

  // 這個函數執行代碼 promise 狀態為成功狀態!!!

  console.log("因為", type, "謝謝班長, 我準備了20個bug, 回饋給你");

  });

  res.catch(function (type) {

  // 這個函數執行代碼

  console.log("因為", type, "謝謝班長, 我準備了800個bug, 開心死你");

  });

  ●promise 的鏈式調用

  fn()

  .then(function (type) {

  // 這個函數執行代碼 promise 狀態為成功狀態!!!

  console.log("因為", type, "謝謝班長, 我準備了20個bug, 回饋給你");

  })

  .catch(function (type) {

  // 這個函數執行代碼

  console.log("因為", type, "謝謝班長, 我準備了800個bug, 開心死你");

  });

  ●promise 的調用方式補充

  ○如果你在第一個 then 里面返回(return) 一個新的 promise 對象的時候

  ○可以在第一個 then 后面, 繼續第二個 then

  fn()

  .then(function (type) {

  console.log(

  "第一次: 因為",

  type,

  "謝謝班長, 我準備了20個bug, 回饋給你"

  );

  return fn();

  })

  .then(function (type) {

  console.log(

  "第二次: 因為",

  type,

  "謝謝班長, 我準備了20個bug, 回饋給你"

  );

  return fn();

  })

  .then(function (type) {

  console.log(

  "第三次: 因為",

  type,

  "謝謝班長, 我準備了20個bug, 回饋給你"

  );

  return fn();

  })

  .catch(function (type) {

  console.log("因為", type, "謝謝班長, 我準備了800個bug, 開心死你");

  });

  ●promise 的其他方法

  ●Promise 實例的 finally 方法

  ○不管promise是成功還是失敗, 只要 promise 執行結束, 我都會執行

  fn()

  .then(function (res) {

  console.log("成功");

  })

  .catch(function (res) {

  console.log("失敗");

  })

  .finally(function () {

  console.log(

  "不管promise是成功還是失敗, 只要 promise 執行結束, 我都會執行"

  );

  });

  Promise 本身還有一些方法

  ○all:

  ■作用: 可以同時觸發多個 promise 行為

  ●只有所有的 promise 都成功的時候, all 才算成功

  ●只要任何一個 promise 失敗的時候, all 就算失敗了

  ■語法: Promise.all([多個 promise])

  ○race:

  ■作用: 可以同時觸發多個 promise 行為

  ●按照速度計算, 當第一個結束的時候就結束了, 成功或失敗取決于第一個執行結束的 promise

  ■語法: Promise.race([多個 promise])

  ○allSettled

  ■作用: 可以同時觸發多個 Promise 行為

  ●不管多個成功還是失敗都會觸發

  ●會在結果內以數組的形式給你返回 每一個 promise 行為的成功還是失敗

  ■語法: Promise.allSettled([多個 promise])

  ○resolve

  ■作用: 強制返回一個成功狀態的 promise 對象

  ○reject

  ■作用: 強制返回一個失敗狀態的 promise 對象

  // 1. all

  Promise.all([fn(), fn(), fn()])

  .then(function () {

  console.log("所有的 參數 都返回 成功狀態");

  })

  .catch(function () {

  console.log("這些參數中, 有一個 為 失敗狀態");

  });

  // 2. race

  Promise.race([fn(), fn(), fn()])

  .then(function () {

  console.log("速度最快的那個執行完畢, 并且是成功狀態時 執行");

  })

  .catch(function () {

  console.log("速度最快的那個執行完畢, 并且是失敗狀態時 執行");

  });

  // 3. allSettled

  Promise.allSettled([fn(), fn(), fn()])

  .then(function (res) {

  console.log(res);

  })

  .catch(function (res) {

  console.log(res);

  });

  // 4. resolve

  Promise.resolve()

  .then(function (res) {

  console.log("成功");

  })

  .catch(function (res) {

  console.log("失敗");

  });

  // 5. reject

  Promise.reject()

  .then(function (res) {

  console.log("成功");

  })

  .catch(function (res) {

  console.log("失敗");

  });

好程序員公眾號

  • · 剖析行業發展趨勢
  • · 匯聚企業項目源碼

好程序員開班動態

More+
  • HTML5大前端 <高端班>

    開班時間:2021-04-12(深圳)

    開班盛況

    開班時間:2021-05-17(北京)

    開班盛況
  • 大數據+人工智能 <高端班>

    開班時間:2021-03-22(杭州)

    開班盛況

    開班時間:2021-04-26(北京)

    開班盛況
  • JavaEE分布式開發 <高端班>

    開班時間:2021-05-10(北京)

    開班盛況

    開班時間:2021-02-22(北京)

    開班盛況
  • Python人工智能+數據分析 <高端班>

    開班時間:2021-07-12(北京)

    預約報名

    開班時間:2020-09-21(上海)

    開班盛況
  • 云計算開發 <高端班>

    開班時間:2021-07-12(北京)

    預約報名

    開班時間:2019-07-22(北京)

    開班盛況
IT培訓IT培訓
在線咨詢
IT培訓IT培訓
試聽
IT培訓IT培訓
入學教程
IT培訓IT培訓
立即報名
IT培訓

Copyright 2011-2023 北京千鋒互聯科技有限公司 .All Right 京ICP備12003911號-5 京公網安備 11010802035720號