腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

JavaScript中promise的使用解釋

更新時(shí)間：2024年05月16日 10:20:27 作者：第7個(gè)前端

這篇文章主要介紹了JavaScript中promise的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

1.promise簡(jiǎn)介

在JavaScript中，Promise是一種處理異步操作的機(jī)制。

它是ES6（ECMAScript 2015）引入的一種語(yǔ)言特性，用于解決回調(diào)地獄（callback hell）問(wèn)題，并使異步代碼更具可讀性和可維護(hù)性。

Promise可以看作是對(duì)異步操作的封裝，它代表了一個(gè)未完成到已完成的操作，并可以返回操作的結(jié)果或錯(cuò)誤。

一個(gè)Promise對(duì)象有三個(gè)狀態(tài)：

Pending（進(jìn)行中）: 初始狀態(tài)，操作正在進(jìn)行中，尚未完成。
Fulfilled（已完成）: 操作已經(jīng)成功完成。
Rejected（已失?。? 操作失敗或出錯(cuò)。

創(chuàng)建一個(gè)Promise對(duì)象可以使用new Promise()構(gòu)造函數(shù)，它接受一個(gè)執(zhí)行器函數(shù)作為參數(shù)。

執(zhí)行器函數(shù)在Promise對(duì)象的實(shí)例化過(guò)程中立即執(zhí)行，它接受兩個(gè)參數(shù)，通常稱為resolve和reject。

在執(zhí)行器函數(shù)中，我們執(zhí)行異步操作，并根據(jù)操作的結(jié)果調(diào)用resolve或reject。

以下是創(chuàng)建Promise對(duì)象的示例：

const promise = new Promise((resolve, reject) => {
  // 異步操作，可以是AJAX請(qǐng)求、定時(shí)器等
  setTimeout(() => {
    const randomNumber = Math.random();
    if (randomNumber < 0.5) {
      // 操作成功，調(diào)用resolve并傳遞結(jié)果
      resolve(randomNumber);
    } else {
      // 操作失敗，調(diào)用reject并傳遞錯(cuò)誤信息
      reject(new Error('操作失敗'));
    }
  }, 1000);
});

Promise對(duì)象有兩個(gè)主要的方法可以用于處理操作完成后的結(jié)果：then()和catch()。

then()方法接收兩個(gè)回調(diào)函數(shù)作為參數(shù)，第一個(gè)回調(diào)函數(shù)用于處理操作成功的結(jié)果，第二個(gè)回調(diào)函數(shù)用于處理操作失敗的情況。

這兩個(gè)回調(diào)函數(shù)可以返回新的Promise對(duì)象，以支持鏈?zhǔn)秸{(diào)用。

以下是使用then()方法處理Promise對(duì)象的示例：

promise.then((result) => {
  console.log('操作成功，結(jié)果為：', result);
}).catch((error) => {
  console.error('操作失敗，錯(cuò)誤信息為：', error);
});

在上述示例中，如果操作成功，將會(huì)調(diào)用第一個(gè)回調(diào)函數(shù)并打印結(jié)果，如果操作失敗，則調(diào)用catch()方法中的回調(diào)函數(shù)并打印錯(cuò)誤信息。

除了then()和catch()，Promise還提供了其他一些方法，如finally()、all()和race()等，用于更高級(jí)的操作和處理多個(gè)Promise對(duì)象。

希望這個(gè)簡(jiǎn)單的講解可以幫助你理解JavaScript中的Promise。

Promise是一種非常強(qiáng)大和靈活的異步編程工具，它可以顯著提高代碼的可讀性和可維護(hù)性。

2.Promise還提供了其他一些方法

主要包括哪些：

除了then()和catch()方法，Promise還提供了以下常用的方法：

finally(onFinally):

該方法在Promise對(duì)象無(wú)論是被解析（fulfilled）還是被拒絕（rejected）時(shí)都會(huì)執(zhí)行，無(wú)論前面的操作結(jié)果如何。

它接收一個(gè)回調(diào)函數(shù)作為參數(shù)，在Promise執(zhí)行結(jié)束后調(diào)用該回調(diào)函數(shù)。

promise.finally(() => {
  console.log('Promise執(zhí)行結(jié)束');
});

all(iterable):

該方法接收一個(gè)可迭代對(duì)象（比如數(shù)組）作為參數(shù)，返回一個(gè)新的Promise對(duì)象。

這個(gè)新的Promise對(duì)象在可迭代對(duì)象中的所有Promise對(duì)象都解析（fulfilled）后才會(huì)解析，或者只要有一個(gè)Promise對(duì)象被拒絕（rejected）就會(huì)被拒絕。

返回的Promise對(duì)象的解析值是一個(gè)數(shù)組，包含了可迭代對(duì)象中所有Promise對(duì)象的解析值，順序與可迭代對(duì)象中的順序一致。

const promises = [promise1, promise2, promise3];
Promise.all(promises)
  .then((results) => {
    console.log('所有Promise對(duì)象都已解析', results);
  })
  .catch((error) => {
    console.error('至少有一個(gè)Promise對(duì)象被拒絕', error);
  });

ace(iterable):

該方法接收一個(gè)可迭代對(duì)象（比如數(shù)組）作為參數(shù)，返回一個(gè)新的Promise對(duì)象。

這個(gè)新的Promise對(duì)象將解析（fulfilled）或拒絕（rejected）取決于可迭代對(duì)象中最先解析或拒絕的Promise對(duì)象。

返回的Promise對(duì)象將具有第一個(gè)解析或拒絕的Promise對(duì)象的解析值或拒絕原因。

const promises = [promise1, promise2, promise3];
Promise.race(promises)
  .then((result) => {
    console.log('第一個(gè)解析或拒絕的Promise對(duì)象', result);
  })
  .catch((error) => {
    console.error('第一個(gè)拒絕的Promise對(duì)象', error);
  });

allSettled(iterable):

該方法接收一個(gè)可迭代對(duì)象（比如數(shù)組）作為參數(shù)，返回一個(gè)新的Promise對(duì)象。

這個(gè)新的Promise對(duì)象在可迭代對(duì)象中的所有Promise對(duì)象都解析或拒絕后才會(huì)解析，不管結(jié)果如何，返回的Promise對(duì)象的解析值是一個(gè)包含所有Promise對(duì)象的解析狀態(tài)和值的數(shù)組。

const promises = [promise1, promise2, promise3];
Promise.allSettled(promises)
  .then((results) => {
    console.log('所有Promise對(duì)象都已解析或拒絕', results);
  });

這些是Promise提供的一些常用方法，可以根據(jù)具體需求選擇使用。

它們使得處理異步操作更加便捷和靈活，提供了更多的控制和處理方式。

3.Promise常用方法的簡(jiǎn)化版本的源碼實(shí)現(xiàn)

finally(onFinally)：

Promise.prototype.finally = function(onFinally) {
  return this.then(
    (value) => Promise.resolve(onFinally()).then(() => value),
    (reason) =>
      Promise.resolve(onFinally()).then(() => {
        throw reason;
      })
  );
};
all(iterable)
javascript
Copy code
Promise.all = function(iterable) {
  const promises = Array.from(iterable);
  return new Promise((resolve, reject) => {
    if (promises.length === 0) {
      resolve([]);
    } else {
      const results = [];
      let completedCount = 0;
      promises.forEach((promise, index) => {
        Promise.resolve(promise)
          .then((value) => {
            results[index] = value;
            completedCount++;
            if (completedCount === promises.length) {
              resolve(results);
            }
          })
          .catch(reject);
      });
    }
  });
};

race(iterable)：

Promise.race = function(iterable) {
  return new Promise((resolve, reject) => {
    const promises = Array.from(iterable);
    promises.forEach((promise) => {
      Promise.resolve(promise)
        .then(resolve)
        .catch(reject);
    });
  });
};

allSettled(iterable)：

Promise.allSettled = function(iterable) {
  const promises = Array.from(iterable);
  return new Promise((resolve) => {
    if (promises.length === 0) {
      resolve([]);
    } else {
      const results = [];
      let completedCount = 0;
      promises.forEach((promise, index) => {
        Promise.resolve(promise)
          .then((value) => {
            results[index] = { status: 'fulfilled', value };
            completedCount++;
            if (completedCount === promises.length) {
              resolve(results);
            }
          })
          .catch((reason) => {
            results[index] = { status: 'rejected', reason };
            completedCount++;
            if (completedCount === promises.length) {
              resolve(results);
            }
          });
      });
    }
  });
};

請(qǐng)注意，這些源碼實(shí)現(xiàn)是簡(jiǎn)化版本，用于說(shuō)明Promise方法的基本概念和工作原理。

實(shí)際的Promise實(shí)現(xiàn)可能會(huì)更加復(fù)雜，涉及更多細(xì)節(jié)和錯(cuò)誤處理機(jī)制。

這些實(shí)現(xiàn)僅提供了一個(gè)基本的參考，而非用于生產(chǎn)環(huán)境。