在 React 中将多个 Fetch 语句与 ComponentWillMount 结合使用

2020-11-09 08:00飞浪

介绍

在 React 应用中编写代码时，您很可能需要从外部 API 获取数据，以便根据该数据呈现视图。但是，将异步代码引入应用总是会带来复杂性的开销。为了帮助应对这种复杂性，React 引入了组件生命周期钩子。组件生命周期钩子是在组件“生命周期”的某些阶段触发的方法。过去在 HTTP 请求方面使用的两个最常见的组件生命周期钩子是componentWillMount和componentDidMount。

在本指南中，您将了解过去如何使用componentWillMount和componentDidMount发出 HTTP 请求。您还将了解如何执行多个 HTTP 获取请求以获取其中的数据。

componentWillMount 生命周期钩子

componentWillMount曾经是任何组件生命周期不可或缺的一部分。我说“曾经是”是因为现在，componentWillMount从 React v. 17 开始被弃用了！在很多应用中，它是用于请求数据的生命周期钩子，正如名称所暗示的那样，这将是执行请求的地方！然而，这种方法的问题是，组件渲染函数必须保证在componentWillMount中执行 HTTP 请求之前运行。这通常意味着，如果数据依赖于 HTTP 请求，则您的组件在其视图层中没有数据显示。

因此，您最终需要显示某种默认数据或加载屏幕，直到 HTTP 请求返回，因为渲染函数将在请求成功执行之前运行。最终，这意味着您可以放弃使用componentWillMount，只需在类组件的构造函数中设置一些默认数据或加载屏幕。然后，您可以将 HTTP 请求移至componentDidMount生命周期方法。componentDidMount生命周期方法保证在执行第一个渲染函数后直接运行。这使其成为获取数据的可靠选择！

在 componentDidMount 中使用多个 Fetch 语句

在本节中，您将学习如何使用 Fetch API 从两个不同位置发出 HTTP 请求并合并结果。让我们开始编写代码吧！

      import React from 'react';

class MyComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            mergedData: this.props.defaultData
        }
    }

    componentDidMount() {
        Promise.all([
            fetch(this.props.urlOne).then(res => res.json()),
            fetch(this.props.urlTwo).then(res => res.json())
        ]).then(([urlOneData, urlTwoData]) => {
            this.setState({
                mergedData: urlOneData.concat(urlTwoData)
            });
        })
    }

    render() {
        return (
            <div>
                <h1>Check out this Data!</h1>
                <DataView data={this.state.mergedData}/>
            </div>
        )
    }
}
    

在上面的简单示例中，您可以看到MyComponent组件。此组件通过父组件从 props 获取一些默认数据。这是最初将显示的数据。

然后在componentDidMount生命周期方法中，针对两个不同的 API 执行多个 fetch 语句。Promise.all方法用于将这些fetch调用的结果合并到一个数组中。使用Promise.all允许组件并行执行这些请求。一旦两个响应完成，您将得到一个包含两个子数组的数组。然后调用setState方法，以便根据两个子数组的连接结果设置mergedData状态。

就这样！您刚刚学习了如何使用 Fetch API 在componentDidMount生命周期方法中执行多个 HTTP 请求。

结论

componentWillMount生命周期方法已过时。请谨慎使用！今后，所有 HTTP 请求都应在componentDidMount生命周期方法中发出。

如果您使用的是功能组件而不是类组件，还有另一种获取数据的方法。那就是使用useEffect钩子。有关useEffect 的更多信息，请查看 React文档。

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

_查看原文

曝光29579浏览1530

介绍

componentWillMount 生命周期钩子

在 componentDidMount 中使用多个 Fe​​tch 语句

结论

在 componentDidMount 中使用多个 Fetch 语句