JS解決回調(diào)地獄為什么需要Promise來優(yōu)化異步編程

更新時間：2023年10月16日 10:50:43 作者：Qing

這篇文章主要為大家介紹了JS解決回調(diào)地獄為什么需要Promise來優(yōu)化異步編程原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

為什么需要Promise？

JavaScript在執(zhí)行異步操作時，我們并不知道什么時候完成，但是我們又需要在這個異步任務(wù)完成后執(zhí)行一系列動作，傳統(tǒng)的做法就是使用回調(diào)函數(shù)來實現(xiàn)，下面舉個常見的例子。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    function loadImage(imgUrl, callback) {
      const img = document.createElement("img");
      img.onload = function () {
        callback(this);
      };
      img.src = imgUrl;
    }

    loadImage(
      "https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg",
      (img) => document.body.appendChild(img)
    );
  </script>
</html>

上面這個例子會在圖片加載完成后將圖片放置在body元素下，隨后在頁面上也會展示出來。
但是如果我們需要在加載完這張圖片后再加載其它的圖片呢，只能在回調(diào)函數(shù)里面再次調(diào)用loadImage

loadImage(
  "https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg",
  (img) => {
    document.body.appendChild(img);
    loadImage(
      "https://travel.12306.cn/imgs/resources/uploadfiles/images/8b36f9a7-f780-4e71-b719-9300109a9ff2_product_W572_H370.jpg",
      (img) => {
        document.body.appendChild(img);
      }
    );
  }
);

繼續(xù)增加一張圖片呢？

loadImage(
  "https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg",
  (img) => {
    document.body.appendChild(img);
    loadImage(
      "https://travel.12306.cn/imgs/resources/uploadfiles/images/8b36f9a7-f780-4e71-b719-9300109a9ff2_product_W572_H370.jpg",
      (img) => {
        document.body.appendChild(img);
        loadImage(
          "https://travel.12306.cn/imgs/resources/uploadfiles/images/6d77d0ea-53d0-4518-b7e9-e53795b4920c_product_W572_H370.jpg",
          (img) => {
            document.body.appendChild(img);
          }
        );
      }
    );
  }
);

如果按照上述的方式再增加圖片，我們就需要在每層的回調(diào)函數(shù)里面調(diào)用loadImage，就形成了所謂的回調(diào)地獄。

Promise

定義

Promise是一種解決異步編程的方案，它比傳統(tǒng)的異步解決方案更加直觀和靠譜。

狀態(tài)

Promise對象總共有三種狀態(tài)

pending：執(zhí)行中，Promise創(chuàng)建后的初始狀態(tài)。
fulfilled：執(zhí)行成功，異步操作成功取得預(yù)期結(jié)果后的狀態(tài)。
rejected：執(zhí)行失敗，異步操作失敗未取得預(yù)期結(jié)果后的狀態(tài)。

創(chuàng)建方法

const promise = new Promise((resolve, reject) => {})

Promise構(gòu)造函數(shù)接收一個函數(shù)，這個函數(shù)可以被稱為執(zhí)行器，這個函數(shù)接收兩個函數(shù)作為參數(shù)，當(dāng)執(zhí)行器有了結(jié)果后，會調(diào)用兩個函數(shù)之一。

resolve：在函數(shù)執(zhí)行成功時調(diào)用，并且把執(zhí)行器獲取到的結(jié)果當(dāng)成實參傳遞給它，調(diào)用形式如resolve(獲取到的結(jié)果)
reject：函數(shù)執(zhí)行失敗時調(diào)用，并且把具體的失敗原因傳遞給它，調(diào)用形式如reject(失敗原因)

注意：resolve和reject兩個回調(diào)函數(shù)在Promise類內(nèi)部已經(jīng)定義好函數(shù)體，如果想了解實現(xiàn)的可以在網(wǎng)上搜索Promise的源碼實現(xiàn)。

const promise = new Promise((resolve, reject) => {
  /* 做一些需要時間的事，之后調(diào)用可能會resolve 也可能會reject */
  setTimeout(() => {
    const random = Math.random()
    console.log(random)
    if (random > 0.5) {
      resolve('success')
    } else {
      reject('fail')
    }

  }, 500)
})

console.log(promise)

在瀏覽器控制執(zhí)行上面這段代碼

可以看到剛開始promise的狀態(tài)是pending狀態(tài)，500ms后promise的狀態(tài)轉(zhuǎn)變?yōu)閞ejected。

狀態(tài)轉(zhuǎn)換

當(dāng)執(zhí)行器獲取到結(jié)果后，并且調(diào)用resolve或者reject兩個函數(shù)中的一個，整個promise對象的狀態(tài)就會發(fā)生變化。

這個狀態(tài)的轉(zhuǎn)換過程是不可逆的，一旦發(fā)生轉(zhuǎn)換，狀態(tài)就不會再發(fā)生變化了。

實例方法

promise對象里面有兩個函數(shù)用來消費(fèi)執(zhí)行器產(chǎn)生的結(jié)果，分別是then和catch，而finally則用來執(zhí)行清理工作。

then

then這個函數(shù)接收兩個函數(shù)作為參數(shù)，當(dāng)執(zhí)行器傳遞的結(jié)果狀態(tài)是fulfilled，第一個函數(shù)參數(shù)會接收到執(zhí)行器傳遞過來的結(jié)果當(dāng)做參數(shù)，并且執(zhí)行；當(dāng)執(zhí)行器傳遞的結(jié)果狀態(tài)為rejected，那么作為第二個函數(shù)參數(shù)會收到執(zhí)行器傳遞過來的結(jié)果當(dāng)做參數(shù)，并且執(zhí)行。

const promise = new Promise((resolve, reject) => {
  /* 做一些需要時間的事，之后調(diào)用可能會resolve 也可能會reject */
  setTimeout(() => {
    const random = Math.random();
    if (random > 0.5) {
      resolve("success");
    } else {
      reject("fail");
    }
  }, 500);
});
console.log(promise);
promise.then(
  (res) => console.log("resolved: ", res),  // 生成的隨機(jī)數(shù)大于0.5，則會執(zhí)行這個函數(shù)
  (err) => console.error("rejected: ", err)  // 生成的隨機(jī)數(shù)小于0.5，則會執(zhí)行這個函數(shù)
);

可以嘗試多次執(zhí)行上面這段代碼，注意控制臺打印信息，看是否符合上面的結(jié)論。

如果我們只對成功的情況感興趣，那么我們可以只為then函數(shù)提供一個函數(shù)參數(shù)。

const promise = new Promise((resolve) => setTimeout(() => resolve("done"), 1000))

promise.then(console.log) // 1秒后打印done

如果我們只對錯誤的情況感興趣，那么我們可以為then的第一個參數(shù)提供null，在第二個參數(shù)提供具體的函數(shù)

const promise = new Promise((resolve, reject) =>
  setTimeout(() => reject("fail"), 1000)
);

promise.then(null, console.log); // 1秒后打印fail

catch

catch這個函數(shù)接收一個函數(shù)作為參數(shù)，當(dāng)執(zhí)行器傳遞的結(jié)果狀態(tài)為rejected，函數(shù)才會被調(diào)用。

const promise = new Promise((reject) => setTimeout(() => reject("fail"), 500)).catch(
  console.log
)

promise.catch(console.log)

可能有同學(xué)會發(fā)現(xiàn)，傳遞給catch的參數(shù)好像和傳遞給then的第二個參數(shù)長得一模一樣，兩種方式有什么差異嗎？
答案是沒有，then(null, errorHandler)和catch(errorHandler)這兩種用法都能達(dá)到一樣的效果，都能消費(fèi)執(zhí)行器執(zhí)行失敗時傳遞的原因。

finally

常規(guī)的try-catch語句有finally語句，在promise中也有finally，它接收一個函數(shù)作為參數(shù)，無論執(zhí)行器得到的結(jié)果狀態(tài)是fulfilled還是rejected，這個函數(shù)參數(shù)是一定會被執(zhí)行的。
finally的目的是用來執(zhí)行清理動作的，例如請求已經(jīng)完成，停止顯示loading圖標(biāo)。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const random = Math.random();
    if (random > 0.5) {
      resolve("success");
    } else {
      reject("fail");
    }
  }, 500);
});

promise
  .finally((res) => {
    console.log("======res======", res); // 打印undefined
    console.log("task is done, do something");
  })
  .then(console.log, console.error); // 打印success或者fail

通過打印結(jié)果可以確定兩點

傳遞給finally的函數(shù)也不會接收到執(zhí)行器處理后的結(jié)果。
finally函數(shù)不參與對執(zhí)行器產(chǎn)生結(jié)果的消費(fèi)，將執(zhí)行器產(chǎn)生的結(jié)果傳遞給后續(xù)的程序去進(jìn)行消費(fèi)。

手動實現(xiàn)下finally函數(shù)，對上面說到的這兩個點就會非常清晰

Promise.prototype._finally = function (callback) {
  return this.then(
    (res) => {
      callback();
      return res;
    },
    (err) => {
      callback();
      throw err;
    }
  );
};

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

前面介紹的then、catch以及finally函數(shù)在調(diào)用后都會返回promise對象，進(jìn)而可以再次調(diào)用then、catch以及finally，這樣就可以進(jìn)行鏈?zhǔn)秸{(diào)用了。

const promise = new Promise((resolve) => {
  setTimeout(() => resolve(1), 1000);
});

promise
  .then((res) => {
    console.log(res); // 1
    return res * 2;
  })
  .then((res) => {
    console.log(res); // 2
    return res * 2;
  })
  .then((res) => {
    console.log(res); // 4
    return res * 2;
  })
  .then((res) => {
    console.log(res); // 8
  });

我們用鏈?zhǔn)秸{(diào)用的方式來優(yōu)化先前加載圖片的代碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    function loadImage(imgUrl) {
      return new Promise((resolve) => {
        const img = document.createElement("img");
        img.onload = function () {
          resolve(this);
        };
        img.src = imgUrl;
      });
    }

    loadImage(
      "https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg"
    )
      .then((img) => {
        document.body.appendChild(img);
        return loadImage(
          "https://travel.12306.cn/imgs/resources/uploadfiles/images/8b36f9a7-f780-4e71-b719-9300109a9ff2_product_W572_H370.jpg"
        );
      })
      .then((img) => {
        document.body.appendChild(img);
        return loadImage(
          "https://travel.12306.cn/imgs/resources/uploadfiles/images/6d77d0ea-53d0-4518-b7e9-e53795b4920c_product_W572_H370.jpg"
        );
      })
      .then((img) => {
        document.body.appendChild(img);
      });
  </script>
</html>

注意：剛剛接觸promise的同學(xué)不要犯下面這種錯誤，下面這種代碼也是回調(diào)地獄的例子。

loadImage(
      "https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg"
    ).then((img) => {
      document.body.appendChild(img);
      loadImage(
        "https://travel.12306.cn/imgs/resources/uploadfiles/images/8b36f9a7-f780-4e71-b719-9300109a9ff2_product_W572_H370.jpg"
      ).then((img) => {
        document.body.appendChild(img);
        loadImage(
          "https://travel.12306.cn/imgs/resources/uploadfiles/images/6d77d0ea-53d0-4518-b7e9-e53795b4920c_product_W572_H370.jpg"
        ).then((img) => {
          document.body.appendChild(img);
        });
      });
    });

靜態(tài)方法

Promise.resolve

用來生成狀態(tài)為fulfilled的promise對象，使用方式如下

const promise = Promise.resolve(1) // 生成值為1的promise對象

代碼實現(xiàn)如下

Promise.resolve2 = function (value) {
  return new Promise((resolve) => {
    resolve(value);
  });
};

Promise.reject

用來生成狀態(tài)為rejected的promise對象，使用方式如下

const promise = Promise.reject('fail')) // 錯誤原因為fail的promise對象

代碼實現(xiàn)如下

Promise.reject2 = function(value) {
  return new Promise((_, reject) => {
    reject(value)
  })
}

Promise.race

接收一個可迭代的對象，并將最先執(zhí)行完成的promise對象返回。

const promise = Promise.race([
  new Promise((resolve, reject) => setTimeout(() => reject(1), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(2), 1000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
])

promise.then(console.log) // 打印2

代碼實現(xiàn)

Promise.race2 = function (promises) {
  return new Promise((resolve, reject) => {
    if (!promises[Symbol.iterator]) {
      reject(new Error(`${typeof promises} ${promises} is not iterable`));
    }
    for (const promise of promises) {
      Promise.resolve(promise).then(resolve, reject);
    }
  });
};

Promise.all

假設(shè)我們希望并行執(zhí)行多個promise對象，并等待所有的promise都執(zhí)行成功。
接收一個可迭代對象(通常是promise數(shù)組)，當(dāng)?shù)鷮ο罄锩婷總€值都被resolve時，會返回一個新的promise，并將結(jié)果數(shù)組進(jìn)行返回。當(dāng)?shù)鷮ο罄锩嬗腥我庖粋€值被reject時，直接返回新的promise，其狀態(tài)為rejected。

const promise = Promise.all([
  new Promise((resolve, reject) => setTimeout(() => reject(1), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(2), 1000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
])

promise.then(console.log, co sole.error) // console.error打印1

這里需要注意一個點，結(jié)果數(shù)組的順序和源promise的順序是一致的，即使前面的promise耗費(fèi)時間最長，其結(jié)果也會放置在結(jié)果數(shù)組第一個。

const promise = Promise.all([
  new Promise((resolve, reject) => setTimeout(() => resolve(1), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(2), 1000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
])

promise.then(console.log) // 打印結(jié)果[1, 2, 3]

我們針對圖片加載的例子使用Promise.all來實現(xiàn)。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    function loadImage(imgUrl) {
      return new Promise((resolve) => {
        const img = document.createElement("img");
        img.onload = function () {
          resolve(this);
        };
        img.src = imgUrl;
      });
    }
    const imgUrlList = [
      "https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg",
      "https://travel.12306.cn/imgs/resources/uploadfiles/images/8b36f9a7-f780-4e71-b719-9300109a9ff2_product_W572_H370.jpg",
      "https://travel.12306.cn/imgs/resources/uploadfiles/images/6d77d0ea-53d0-4518-b7e9-e53795b4920c_product_W572_H370.jpg",
    ];
    const promiseList = imgUrlList.map((item) => loadImage(item));
    const promise = Promise.all(promiseList).then((imglist) => {
      imglist.forEach((item) => document.body.appendChild(item));
    });
  </script>
</html>

代碼實現(xiàn)

Promise.all2 = function (promises) {
  return new Promise((resolve, reject) => {
    if (!promises[Symbol.iterator]) {
      reject(new Error(`${typeof promises} ${promises} is not iterable`));
    }
    const len = promises.length;
    const result = new Array(len);
    let count = 0;
    if (!len) {
      resolve(result);
      return;
    }
    for (let i = 0; i < promises.length; i++) {
      Promise.resolve(promises[i]).then(
        (res) => {
          count++;
          result[i] = res;  // 保證結(jié)果數(shù)組的放置順序
          if (count === len) {
            resolve(result);
          }
        },
        (err) => {
          reject(err);
        }
      );
    }
  });
};

Promise.allSettled

前面提到的Promise.all遇到任意一個promise reject，那么Promise.all會直接返回一個rejected的promise對象。而Promise.allSetled只需要等待迭代對象內(nèi)所有的值都完成了狀態(tài)的轉(zhuǎn)變，無論迭代對象里面的值是被resolve還是reject，那么就會返回一個狀態(tài)為fulfilled的promise對象，并以包含對象數(shù)組的形式返回結(jié)果。

const promise = Promise.allSettled([
  new Promise((resolve, reject) => setTimeout(() => reject(1), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(2), 1000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000)),
]);

promise.then(console.log, console.error); 

// 打印結(jié)果

// [
//   { status: 'rejected', reason: 1 },
//   { status: 'fulfilled', value: 2 },
//   { status: 'fulfilled', value: 3 }
// ]

代碼實現(xiàn)

Promise.allSettled2 = function (promises) {
  const resolveHandler = (res) => ({ status: "fulfilled", value: res });
  const rejectHandler = (err) => ({ status: "rejected", reason: err });
  return Promise.all(
    promises.map((item) => item.then(resolveHandler, rejectHandler))
  );
};

使用場景

大多數(shù)異步任務(wù)場景都可以使用promise，例如網(wǎng)絡(luò)請求、文件操作、數(shù)據(jù)庫操作等。當(dāng)然不是所有的異步任務(wù)場景都適合使用promise，例如在事件驅(qū)動的編程模型中，使用時間監(jiān)聽器和觸發(fā)器來處理異步操作更加自然和直觀。

在JavaScript中，async和await提供基于promise更高級的異步編程方式，其使用方式看起來就像同步操作一樣，更加直觀。在使用promise的同時，可以配合async和await體驗更好的異步編程。

一個小問題

我們前面在講catch的時候說到了，catch(errorHandler)其實就是then(null, errorHandler)的簡寫，那么下面兩種寫法會有區(qū)別嗎？

// 寫法1
promise.then(resolveHandler, rejectHandler)

// 寫法2
promise.then(resolveHandler).catch(rejectHandler)

答案是不一樣，假如在resolveHandler里面拋出錯誤，寫法1最終會獲得一個rejected的promise，而寫法二由于后續(xù)有catch方法，所以即使f1里面有拋出異常，也能得到處理。

以上就是JS解決回調(diào)地獄為什么需要Promise來優(yōu)化異步編程的詳細(xì)內(nèi)容，更多關(guān)于JS Promise異步編程的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

JS解決回調(diào)地獄為什么需要Promise來優(yōu)化異步編程

目錄

為什么需要Promise？

Promise

定義

狀態(tài)

創(chuàng)建方法

狀態(tài)轉(zhuǎn)換

實例方法

then

catch

finally

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

靜態(tài)方法

Promise.resolve

Promise.reject

Promise.race

Promise.all

Promise.allSettled

使用場景

一個小問題

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

JS解決回調(diào)地獄為什么需要Promise來優(yōu)化異步編程

目錄

為什么需要Promise？

Promise

定義

狀態(tài)

創(chuàng)建方法

狀態(tài)轉(zhuǎn)換

實例方法

then

catch

finally

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

靜態(tài)方法

Promise.resolve

Promise.reject

Promise.race

Promise.all

Promise.allSettled

使用場景

一個小問題

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

為什么需要Promise？