国产另类ts人妖一区二区_欧美肥老太做爰视频_快穿高h肉_国产欧美综合在线

當(dāng)前位置: 首頁 / 技術(shù)干貨 / 正文
前端技術(shù)干貨-Promise的相關(guān)介紹

2023-03-28

promise  ■ 失敗

前端技術(shù)干貨-Promise的相關(guān)介紹

  ●Promise

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

  因?yàn)閾Q了一種封裝方案, 不需要安裝回調(diào)函數(shù)的方式去調(diào)用, 需要按照 promise 的形式去調(diào)用

  注意 promise 不是解決 異步問題的, 而是解決回調(diào)地獄問題的

  ●認(rèn)識 Promise

  ○promise 的三種狀態(tài)

  ■持續(xù): pending

  ■成功: fulfilled

  ■失敗: rejected

  ○promise 的兩種轉(zhuǎn)換

  ■從持續(xù)轉(zhuǎn)為成功

  ■從持續(xù)轉(zhuǎn)為失敗

  ○promise 的基礎(chǔ)語法

  ■ES6 內(nèi)置構(gòu)造函數(shù)

  ○promise 的語法

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

  ○promise 對象可以觸發(fā)的兩個方法

  ■p.then(函數(shù)); 成功時執(zhí)行

  ■p.catch(函數(shù)); 失敗時執(zhí)行

  ●promise 封裝一個異步函數(shù)

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

  // resolve: 是一個形參, 名字自定義, 值是一個函數(shù), 當(dāng)你調(diào)用的時候, 會把當(dāng)前 promise 的狀態(tài)轉(zhuǎn)換為 成功

  // reject: 是一個形參, 名字自定義, 值是一個函數(shù), 當(dāng)你調(diào)用的時候, 會把當(dāng)前 promise 的狀態(tài)轉(zhuǎn)換為 失敗

  // resolve 和 reject 調(diào)用時可以傳遞一個參數(shù), 這個參數(shù)會被傳遞給對應(yīng)的 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 為函數(shù)

  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 的實(shí)例對象 p

  const res = fn();

  res.then(function (type) {

  // 這個函數(shù)執(zhí)行代碼 promise 狀態(tài)為成功狀態(tài)!!!

  console.log("因?yàn)?, type, "謝謝班長, 我準(zhǔn)備了20個bug, 回饋給你");

  });

  res.catch(function (type) {

  // 這個函數(shù)執(zhí)行代碼

  console.log("因?yàn)?, type, "謝謝班長, 我準(zhǔn)備了800個bug, 開心死你");

  });

  ●promise 的鏈?zhǔn)秸{(diào)用

  fn()

  .then(function (type) {

  // 這個函數(shù)執(zhí)行代碼 promise 狀態(tài)為成功狀態(tài)!!!

  console.log("因?yàn)?, type, "謝謝班長, 我準(zhǔn)備了20個bug, 回饋給你");

  })

  .catch(function (type) {

  // 這個函數(shù)執(zhí)行代碼

  console.log("因?yàn)?, type, "謝謝班長, 我準(zhǔn)備了800個bug, 開心死你");

  });

  ●promise 的調(diào)用方式補(bǔ)充

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

  ○可以在第一個 then 后面, 繼續(xù)第二個 then

  fn()

  .then(function (type) {

  console.log(

  "第一次: 因?yàn)?,

  type,

  "謝謝班長, 我準(zhǔn)備了20個bug, 回饋給你"

  );

  return fn();

  })

  .then(function (type) {

  console.log(

  "第二次: 因?yàn)?,

  type,

  "謝謝班長, 我準(zhǔn)備了20個bug, 回饋給你"

  );

  return fn();

  })

  .then(function (type) {

  console.log(

  "第三次: 因?yàn)?,

  type,

  "謝謝班長, 我準(zhǔn)備了20個bug, 回饋給你"

  );

  return fn();

  })

  .catch(function (type) {

  console.log("因?yàn)?, type, "謝謝班長, 我準(zhǔn)備了800個bug, 開心死你");

  });

  ●promise 的其他方法

  ●Promise 實(shí)例的 finally 方法

  ○不管promise是成功還是失敗, 只要 promise 執(zhí)行結(jié)束, 我都會執(zhí)行

  fn()

  .then(function (res) {

  console.log("成功");

  })

  .catch(function (res) {

  console.log("失敗");

  })

  .finally(function () {

  console.log(

  "不管promise是成功還是失敗, 只要 promise 執(zhí)行結(jié)束, 我都會執(zhí)行"

  );

  });

  Promise 本身還有一些方法

  ○all:

  ■作用: 可以同時觸發(fā)多個 promise 行為

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

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

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

  ○race:

  ■作用: 可以同時觸發(fā)多個 promise 行為

  ●按照速度計(jì)算, 當(dāng)?shù)谝粋€結(jié)束的時候就結(jié)束了, 成功或失敗取決于第一個執(zhí)行結(jié)束的 promise

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

  ○allSettled

  ■作用: 可以同時觸發(fā)多個 Promise 行為

  ●不管多個成功還是失敗都會觸發(fā)

  ●會在結(jié)果內(nèi)以數(shù)組的形式給你返回 每一個 promise 行為的成功還是失敗

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

  ○resolve

  ■作用: 強(qiáng)制返回一個成功狀態(tài)的 promise 對象

  ○reject

  ■作用: 強(qiáng)制返回一個失敗狀態(tài)的 promise 對象

  // 1. all

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

  .then(function () {

  console.log("所有的 參數(shù) 都返回 成功狀態(tài)");

  })

  .catch(function () {

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

  });

  // 2. race

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

  .then(function () {

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

  })

  .catch(function () {

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

  });

  // 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("失敗");

  });

好程序員公眾號

  • · 剖析行業(yè)發(fā)展趨勢
  • · 匯聚企業(yè)項(xiàng)目源碼

好程序員開班動態(tài)

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

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

    開班盛況

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

    開班盛況
  • 大數(shù)據(jù)+人工智能 <高端班>

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

    開班盛況

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

    開班盛況
  • JavaEE分布式開發(fā) <高端班>

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

    開班盛況

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

    開班盛況
  • Python人工智能+數(shù)據(jù)分析 <高端班>

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

    預(yù)約報名

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

    開班盛況
  • 云計(jì)算開發(fā) <高端班>

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

    預(yù)約報名

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

    開班盛況
IT培訓(xùn)IT培訓(xùn)
在線咨詢
IT培訓(xùn)IT培訓(xùn)
試聽
IT培訓(xùn)IT培訓(xùn)
入學(xué)教程
IT培訓(xùn)IT培訓(xùn)
立即報名
IT培訓(xùn)

Copyright 2011-2023 北京千鋒互聯(lián)科技有限公司 .All Right 京ICP備12003911號-5 京公網(wǎng)安備 11010802035720號