当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript 中的 Promise：理解、处理和掌握异步代码

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

来源：dev.to 2024-09-07 12:00:49 0浏览收藏

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JavaScript 中的 Promise：理解、处理和掌握异步代码》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

简介

我曾经是一名 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 时，我们调用解析函数。拒绝是在评估我们的逻辑过程中发生错误时拒绝承诺。

检索 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 options

writeFileAsync(filePath, fileContent, fileOptions);