按时间间隔分发 Promise

2020-11-07 08:00:00 · 飞浪

在本指南中，您将学习如何通过按间隔分派 JavaScript 承诺在 React 应用程序中设置轮询。

介绍

构建 Web 应用时，通常需要发出 HTTP 请求或在一定时间间隔内执行某种异步操作。发出 HTTP 请求以在一定时间间隔内收集数据或轮询是 Web 开发人员需要了解的重要主题。

在本指南中，您将学习如何通过按间隔分派 JavaScript Promise 在 React 应用中设置轮询。Promise API 允许您在代码库中建模异步操作。您将了解如何使用 Promise 与 setInterval 方法相结合，让您轻松轮询外部 API。

让我们开始吧！

间隔承诺

如上所述，按间隔分派承诺就是将 Promise API 与全局可用的setInterval方法相结合。

Promises 用于在 JavaScript 代码中建模异步操作。在此示例中，您将看到如何使用 Promises 与内置的 JavaScript Fetch API 来创建 HTTP 请求。

setInterval方法通过传递函数和时间（以毫秒为单位）来工作。创建间隔后，传递给间隔的函数每n毫秒触发一次！

下面，您将看到一些在 React 组件中实现轮询的示例代码。下面的代码在组件挂载时每五秒请求一次爬行动物数据，然后在组件卸载时停止轮询。

      class ReptileViewComponent Extends React.Component {
    constructor(props) {
        super(props);
        this.interval;

        this.state = {
            reptiles: []
        }
    }


    componentWillMount() {
        // Make the first request and then start polling.
        this.requestLatestReptiles();
        this.startPolling();
    }

    componentWillUnmount() {
        this.stopPolling();
    }

    requestLatestReptiles = () => {
        fetch(this.props.reptileUrl)
            .then(response => response.json())
            .then(reptiles => this.setState({ reptiles }));
    }

    startPolling = () => this.interval = setInterval(this.requestLatestReptiles, 5000)

    stopPolling = () => {
        if (this.interval) {
            clearInterval(this.interval);
        }
    }

    // ....
}
    

该代码的第一部分，在构造函数中，设置初始爬行动物状态并创建一个内部组件属性，用于跟踪要创建的间隔。

componentWillMount组件生命周期方法使用requestLatestReptiles和startPolling方法对数据进行初始请求并开始轮询。这是必要的，因为当您在 JavaScript 中使用setInterval时，它不会立即调用您传递给它的函数。

从这里开始，componentWillUnmount组件生命周期方法用于调用stopPolling方法，该方法使用全局clearInterval函数通过清除创建的间隔来停止轮询。

哇！就这样，您创建了一个简单的组件，该组件设置为按间隔分派承诺。您现在可以轮询外部 API，以确保 UI 中始终填充最新数据。

结论

轮询是网页开发者和程序员必备的基本技能。将 JavaScript Promise 与setInterval结合使用，您可以轻松地在应用中设置轮询。

轮询是一项很棒的技能，但它也是一种确保应用拥有最新可用数据的简单方法。轮询的其他替代方案（例如服务器发送事件和 Web 套接字）允许您保持与服务器的开放连接，这样就不会连续发出多个 HTTP 请求。这些类型的 API 允许您在应用中进行实时数据流传输。有关更多信息，请查看服务器发送事件文档和Web 套接字文档。

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

_查看原文

技术指南

阅读全文

按时间间隔分发 Promise

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

class ReptileViewComponent Extends React.Component { constructor(props) { super(props); this.interval; this.state = { reptiles: [] } } componentWillMount() { // Make the first request and then start polling. this.requestLatestReptiles(); this.startPolling(); } componentWillUnmount() { this.stopPolling(); } requestLatestReptiles = () => { fetch(this.props.reptileUrl) .then(response => response.json()) .then(reptiles => this.setState({ reptiles })); } startPolling = () => this.interval = setInterval(this.requestLatestReptiles, 5000) stopPolling = () => { if (this.interval) { clearInterval(this.interval); } } // .... }