JavaScript 中的 Promise：简化异步编程

2023-07-05 13:35:58 阅读：209 来源： 互联网

在 JavaScript 世界中，异步编程是处理耗时任务（例如发出 API 请求或从数据库获取数据）时的一个关键方面。传统上，处理异步操作可能是一个挑战，导致代码复杂且容易出错。然而，随着 JavaScript 中 Promise 的引入，管理异步任务变得更加容易和高效。

什么是承诺？Promise 的核心是一个表示异步操作最终完成或失败的对象。这是一种说法，“嘿，我会告诉你这项任务的结果，请稍等。” Promise 提供了一种干净且结构化的方法来处理异步操作，避免深度嵌套的回调函数并提高代码可读性。

Promise 生命周期： Promise 在其生命周期中会经历不同的阶段。它以挂起状态开始，然后在操作成功时转换为已完成（已解决）状态，或者在发生错误时转换为拒绝状态。一旦 Promise 被解决（履行或拒绝），它就变得不可变，并且其状态无法更改。

创建 Promise：要创建 Promise，您可以使用 Promise 构造函数，该构造函数将回调函数作为其参数。该回调函数也称为执行器，有两个参数：resolve 和reject。在执行器内部，您执行异步任务，完成后，您可以调用带有结果的解析函数或带有错误的拒绝函数。

const myPromise = new  Promise ( ( resolve,reject ) => { 
  // 异步任务
  // 如果成功：
  resolve (result); 
  // 如果错误：
  reject (error); 
});

使用 Promise：一旦有了 Promise，就可以分别使用 then() 和 catch() 方法使用其结果或处理错误。then() 方法采用一个回调函数，该函数将在 Promise 完成时执行，并接收结果作为其参数。catch() 方法处理 Promise 的拒绝并接收错误作为其参数。

我的承诺
  。then ( ( result ) => { 
    // 处理成功结果
  }) 
  . catch ( ( error ) => { 
    // 处理错误
  });

链接 Promise： Promise 还允许链接，使您能够顺序执行多个异步操作。每个 then() 调用都会返回一个新的 Promise，它允许您链接其他 then() 或 catch() 调用。当您有相关任务或需要转换 Promise 的结果时，此模式特别有用。

我的承诺
  。then ( ( result ) => { 
    // 执行下一个异步任务
    return  anotherAsyncTask (result); 
  }) 
  . then ( ( result ) => { 
    // 处理第二个任务的结果
  }) 
  . catch ( ( error ) => { 
    // 处理链中的任何错误
  });

Promises 和异步函数：随着 ECMAScript 2017 (ES8) 中引入 async/await，使用 Promises 变得更加直观。async 关键字用于定义异步函数，该函数在内部将结果包装在 Promise 中。然后，await 关键字用于等待 Promise 的解决，然后再继续执行下一行代码。

异步函数fetchData () {
   try {
     const result = wait myPromise; 
    // 处理结果
  } catch (error) {
     // 处理任何错误
  }
}

Promise.all()：当您需要并行执行多个异步操作并等待所有操作完成时，Promise.all() 方法非常有用。它采用 Promise 数组作为参数，并返回一个新的 Promise，当数组中的所有 Promise 都满足时，该 Promise 会满足；如果任何 Promise 被拒绝，则该 Promise 会被拒绝。返回的 Promise 的履行值是输入 Promise 解析值的数组，其顺序与输入相同。

const Promise1 = someAsyncTask (); 
const Promise2 = anotherAsyncTask (); 
const Promise3 = YetAnotherAsyncTask (); 

答应。所有([promise1,promise2,promise3]) 
  。then ( ( results ) => { 
    // 处理结果数组
  }) 
  . catch ( ( error ) => { 
    // 处理任何错误
  });

JavaScript 中的Promise.race()：处理最快的 Promise

除了 Promise.all() 之外，JavaScript 还提供了另一个有用的方法，称为 Promise.race()。Promise.all() 等待所有 Promise 结算，而 Promise.race() 允许您处理最快结算的 Promise 的结果或错误。这在您想要从多个源检索数据并且只需要第一个源的结果来响应的情况下特别有用。

语法：Promise.race() 的语法很简单。它接受 Promise 数组作为参数并返回一个新的 Promise。一旦输入数组中的第一个 Promise 稳定下来，这个新的 Promise 就会立即稳定下来，无论它是被履行还是被拒绝。由此产生的 Promise 的结算价值将与最快的 Promise 的结算价值相同。

答应。种族([promise1,promise2,...]) 
  。then ( ( result ) => { 
    // 处理最快的结果
  }) 
  . catch ( ( error ) => { 
    // 处理任何错误
  });

使用示例：假设您有多个提供相同信息的 API，并且您希望从响应速度最快的 API 中检索该信息。以下是如何使用 Promise.race() 来实现此目的的示例：

const fetchFromAPI1 = fetch ( 'https://api1.example.com/data' ); 
const fetchFromAPI2 = fetch ( 'https://api2.example.com/data' ); 
const fetchFromAPI3 = fetch ( 'https://api3.example.com/data' ); 

答应。比赛([fetchFromAPI1, fetchFromAPI2, fetchFromAPI3]) 
  。then ( ( response ) => { 
    // 从最快的 API 中提取并处理数据
    return response.json (   ) ;   }) . 那么（（

data ) => {
     // 处理来自最快 API 的数据
  })
  . catch ( ( error ) => {
     // 处理来自最快 API 的任何错误
  });

JavaScript 中的 Promise 彻底改变了开发人员处理异步操作的方式。通过提供干净且结构化的方法，Promise 简化了错误处理、避免回调地狱并增强了代码的可维护性。通过添加 async/await，异步编程变得更加直观和同步。理解 Promise 及其用法是现代 JavaScript 开发的一项基本技能。

标签：JavaScript, 前端开发,Web开发
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript 中的 Promise：简化异步编程