JavaScript 中的 Promise：理解、处理和掌握异步代码

简介

我曾经是一名 java 开发人员，我记得第一次接触 javascript 中的 promise 时。尽管这个概念看起来很简单，但我仍然无法完全理解 promise 是如何工作的。当我开始在项目中使用它们并了解它们解决的案例时，情况发生了变化。然后灵光乍现的时刻到来了，一切都变得更加清晰了。随着时间的推移，promise 成为我工具带上的宝贵武器。当我可以在工作中使用它们并解决函数之间的异步处理时，这是一种奇怪的满足感。

您可能首先在从 api 获取数据时遇到 promise，这也是最常见的示例。最近，我接受了采访，猜猜第一个问题是什么“你能告诉我 promise 和 async await 之间的区别吗？”。我对此表示欢迎，因为我认为这是一个很好的起点，可以更好地了解申请人如何理解这些机制的运作方式。然而，他或她主要使用其他库和框架。它让我记下差异并描述处理异步函数错误的良好实践。

承诺是什么

让我们从最初的问题开始：“promise 是什么？” promise 是我们还不知道的值的占位符，但我们将通过异步计算/函数得到它。如果承诺顺利的话，我们就会得到结果。如果 promise 进展不顺利，那么 promise 将返回错误。

promise 的基本示例

定义一个承诺

通过调用 promise 的构造函数并传递两个回调函数来定义 promise：resolve 和 reject.

const newpromise = new promise((resolve, reject) => {    resolve('hello');    // reject('error');});

登录后复制

当我们想要成功解析 promise 时，我们调用解析函数。拒绝是在评估我们的逻辑过程中发生错误时拒绝承诺。

立即学习“Java免费学习笔记（深入）”；

检索 promise 结果

我们使用内置函数 then 来获取 promise 的结果。它有两个传递的回调，结果和错误。当函数resolve成功解析promise时，将调用结果。如果 promise 未解决，则会调用第二个函数错误。该函数由拒绝或抛出的另一个错误触发。

newpromise.then(result => {    console.log(result); // hello}, error => {    console.log("there shouldn't be an error");});

登录后复制

在我们的示例中，我们将得到结果 hello，因为我们成功解决了 promise。

承诺的错误处理

当 promise 被拒绝时，总是会调用它的第二个错误回调。

const newpromise1 = new promise((resolve, reject) => {  reject('an error occurred in promise1');});newpromise1.then(  (result) => {    console.log(result); // it is not invoked  },  (error) => {    console.log(error); // 'an error occurred in promise1'  });

登录后复制

为了清晰起见，更推荐的方法是使用内置的 catch 方法。

const newpromise2 = new promise((resolve, reject) => {  reject('an error occurred in promise2');});newpromise2  .then((result) => {    console.log(result); // it is not invoked  })  .catch((error) => {    console.log(error); // 'an error occurred in promise2'  });

登录后复制

catch 方法是链式的，并提供了自己的错误回调。当 promise 被拒绝时它会被调用。

两个版本都运行良好，但链接在我看来更具可读性，并且在使用我们进一步介绍的其他内置方法时非常方便。

连锁承诺

一个承诺的结果可能是另一个承诺。在这种情况下，我们可以链接任意数量的 then 函数。

getjson('categories.json')    .then(categories => {        console.log('fetched categories:', categories);        return getjson(categories[0].itemsurl);    })    .then(items => {        console.log('fetched items:', items);        return getjson(items[0].detailsurl);    })    .then(details => {        console.log('fetched details:', details);    })    .catch(error => {        console.error('an error has occurred:', error.message);    });

登录后复制

在我们的示例中，它用于缩小搜索结果范围以获取详细数据。每个 then 函数也可以有其错误回调。如果我们只关心捕获调用链中的任何错误，那么我们可以利用 catch 函数。如果任何 promise 返回错误，它将被评估。

答应一切

有时我们想等待更独立的 promise 的结果，然后根据结果采取行动。如果我们不关心 promise 的解析顺序，我们可以使用内置函数 promise.all。

promise.all([    getjson('categories.json'),    getjson('technology_items.json'),    getjson('science_items.json')])    .then(results => {        const categories = results[0];        const techitems = results[1];        const scienceitems = results[2];        console.log('fetched categories:', categories);        console.log('fetched technology items:', techitems);        console.log('fetched science items:', scienceitems);        // fetch details of the first item in each category        return promise.all([            getjson(techitems[0].detailsurl),            getjson(scienceitems[0].detailsurl)        ]);    })    .then(detailsresults => {        const laptopdetails = detailsresults[0];        const physicsdetails = detailsresults[1];        console.log('fetched laptop details:', laptopdetails);        console.log('fetched physics details:', physicsdetails);    })    .catch(error => {        console.error('an error has occurred:', error.message);    });

登录后复制

promise.all 接受 promise 数组并返回结果数组。如果 promise 之一被拒绝，则 promise.all 也会被拒绝。

赛车承诺

另一个内置功能是 promise.race。当您有多个异步函数（promise）并且您想要对它们进行竞赛时，可以使用它。

promise.race([    getjson('technology_items.json'),    getjson('science_items.json')])    .then(result => {        console.log('first resolved data:', result);    })    .catch(error => {        console.error('an error has occurred:', error.message);    });

登录后复制

promise 的执行可能需要不同的时间，promise.race 会评估数组中第一个已解决或拒绝的 promise。当我们不关心顺序但我们想要最快的异步调用的结果时使用它。

什么是异步等待

如您所见，编写 promise 需要大量样板代码。幸运的是，我们有原生的 async await 功能，这使得使用 promises 变得更加容易。我们用“async”这个词来标记一个函数，并且通过它，我们说在代码中的某个地方我们将调用异步函数，我们不应该等待它。然后使用await 字调用异步函数。

异步等待的基本示例

const fetchdata = async () => {    try {        // fetch the categories        const categories = await getjson('categories.json');        console.log('fetched categories:', categories);        // fetch items from the first category (technology)        const techitems = await getjson(categories[0].itemsurl);        console.log('fetched technology items:', techitems);        // fetch details of the first item in technology (laptops)        const laptopdetails = await getjson(techitems[0].detailsurl);        console.log('fetched laptop details:', laptopdetails);    } catch (error) {        console.error('an error has occurred:', error.message);    }};fetchdata();

登录后复制

我们的 fetchdata 被标记为异步，它允许我们使用await 来处理函数内的异步调用。我们调用更多的 promise，它们会一个接一个地进行评估。

如果我们想处理错误，我们可以使用 try…catch 块。然后被拒绝的错误被捕获在 catch 块中，我们可以像记录错误一样对其采取行动。

有什么不同

它们都是 javascript 处理异步代码的功能。主要区别在于 promise 使用 then 和 catch 链接时的语法，但 async wait 语法更多地采用同步方式。它使它更容易阅读。当异步等待利用 try…catch 块时，错误处理更加简单。这是面试时很容易被问到的问题。在回答过程中，您可以更深入地了解两者的描述并突出显示这些差异。

承诺功能

当然，您可以通过 async wait 使用所有功能。例如 promise.all。

const fetchalldata = async () => {    try {        // use await with promise.all to fetch multiple json files in parallel        const [techitems, scienceitems, laptopdetails] = await promise.all([            getjson('technology_items.json'),            getjson('science_items.json'),            getjson('laptops_details.json')        ]);        console.log('fetched technology items:', techitems);        console.log('fetched science items:', scienceitems);        console.log('fetched laptop details:', laptopdetails);    } catch (error) {        console.error('an error occurred:', error.message);    }};

登录后复制

实际用例

promise 是 javascript 中用于处理异步代码的基本功能。主要使用方法如下：

从 api 获取数据

如上面的示例所示，这是 promise 最常用的用例之一，您每天都会使用它。

处理文件操作

可以使用 promise 来异步读写文件，特别是通过 node.js 模块 fs.promises

import * as fs from 'fs/promises';const writeFileAsync = async (filePath, content, options = {}) => {    try {        await fs.writeFile(filePath, content, options);        console.log(`File successfully written to ${filePath}`);    } catch (error) {        console.error(`Error writing file to ${filePath}:`, error.message);    }};const filePath = 'output.txt';const fileContent = 'Hello, this is some content to write to the file!';const fileOptions = { encoding: 'utf8', flag: 'w' }; // Optional file write optionswriteFileAsync(filePath, fileContent, fileOptions);

登录后复制

基于 promise 的库

axios 是你应该熟悉的库。 axios 在客户端处理 http 请求，使用广泛。

express 是 node.js 的 web 框架。它使构建 web 应用程序和 api 变得容易，并且当您将 promise 与 express 结合使用时，您的代码将保持干净且易于管理。

带有示例的存储库

所有示例都可以在：https://github.com/princam/promise-example

概括

promise 是 javascript 的基本组成部分，对于处理 web 开发中的异步任务至关重要。无论是获取数据、处理文件还是使用 axios 和 express 等流行库，您都会经常在代码中使用 promise。

在本文中，我们探讨了 promise 是什么、如何定义和检索其结果以及如何有效地处理错误。我们还介绍了链接、promise.all 和 promise.race 等关键功能。最后，我们引入了 async wait 语法，它提供了一种更直接的方式来使用 promise。

理解这些概念对于任何 javascript 开发人员来说都至关重要，因为它们是您日常依赖的工具。

如果您还没有尝试过，我建议您编写一个简单的代码片段来从 api 获取数据。您可以从一个有趣的 api 开始进行试验。另外，此存储库中提供了所有示例和代码片段供您探索。

以上就是JavaScript 中的 Promise：理解、处理和掌握异步代码的详细内容，更多请关注【创想鸟】其它相关文章！