使用 Fetch API 处理嵌套 HTTP 请求

介绍

如果您还记得在 JavaScript 中使用 XMLHttpRequest (XHR) 构造发出 HTTP 请求的那些日子，那么您一定特别欣赏更现代的 Fetch API。使用 XHR 请求，JavaScript 开发人员只能使用回调来模拟异步性。Fetch 允许您创建 HTTP 请求，这些请求可以使用 JavaScript Promises 轻松处理。在处理异步控制流方面，Promises 比回调有了很大的进步。当您需要一个接一个地链接多个请求时尤其如此。

在本指南中，您将学习如何有效地处理fetch调用链以避免嵌套。首先，您将了解对链式 HTTP 请求进行建模的简单方法，即使用嵌套调用来fetch。接下来将进行一些优化，包括 Promise 链以及使用async和await关键字。

让我们开始吧！

幼稚的方法

使用fetch时你的第一反应可能是这样做：

      // my-component.jsx

// We have to get chips after we get fish...
getFishAndChips() {
    fetch(this.fishApiUrl) // Request fish species
        .then(fishRes => {
            fishRes.json().then(fish => {
                this.fish = fish;

                const fishIds = fish.map(fish => fish.id);

                fetch( // Request chips using fish ids
                        this.chipsApiUrl,
                        {
                            method: 'POST',
                            body: JSON.stringify({ fishIds })
                        }
                    )
                    .then(chipsRes => {
                        chipsRes.json().then(chips => {
                            this.chips = chips;
                        })
                    })
            })
        })
}
    

在上面的代码中，我们嵌套了两个fetch调用，以确保在请求鱼之后请求芯片。这是因为，为了请求芯片，我们需要使用 POST 请求发送鱼 ID 数组。这有效，但是，这里存在很大的可读性问题。可以大大减少此功能所需的代码量。让我们来看看 Promise 链！

获取承诺链

消除这些fetch调用嵌套的第一种方法是使用所谓的 Promise 链。只需在对Promise.then的调用中返回另一个 Promise 即可实现 Promise 链。以下示例显示了如何执行此操作：

      // We have to get chips after we get fish...
getFishAndChips() {
    fetch(this.fishApiUrl) // Request fish species
        .then(response => response.json())
        .then(fish => {
            this.fish = fish;

            const fishIds = fish.map(fish => fish.id);

            return fetch( // Request chips using fish ids
                        this.chipsApiUrl,
                        {
                            method: 'POST',
                            body: JSON.stringify({ fishIds })
                        }
                    );
        })
        .then(response => response.json())
        .then(chips => {
            this.chips = chips;
        });
}
    

这太棒了！代码更易于维护、简洁且易读。但我们可以做得更好！借助 JavaScript 中引入的新 async/await 语法，我们可以完全消除对Promise.then的多次调用！您将在下一节中看到如何实现这一点。

更好的方法：Async/Await

async/await 关键字是一种在计算机程序中建模异步控制流的绝妙机制。在 JavaScript 中，这些关键字是 Promises 之上的语法糖——它们抽象了对Promise.then的调用。在下面的代码中，我们重构了getFishAndChips函数以使用 async/await。

      // We have to get chips after we get fish...
async getFishAndChips() {
    const fish = await fetch(this.fishApiUrl).then(response => response.json());
    this.fish = fish;

    const fishIds = fish.map(fish => fish.id),
      chipReqOpts = { method: 'POST', body: JSON.stringify({ fishIds }) };

    const chips = await fetch(this.chipsApiUrl, chipReqOpts).then(response => response.json());
    this.chips = chips;
}
    

哇！我们大幅压缩了所使用的代码，同时实现了相同的预期效果。干得好！控制流的 async/await 机制是在您的应用内链接 HTTP 请求的一种极其强大的方法。

结论

在本指南中，您学习了如何在链接 HTTP 请求时避免对 JavaScript Fetch API 进行嵌套调用。您了解到，在 Promise 链接和 async/await 中都可以找到解决嵌套fetch调用的方法。毫无疑问，最易读的代码是通过使用 async/await 语法实现的。

现在您可以自信地在 React 组件中编写现代且可读的异步代码！

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文