Javascript 出现5个错误后停止React Axios轮询

我已经在我的react应用程序中为通知实现了轮询机制。 因此，每2秒钟我就向我的api（在另一个域中）发送一个请求，并检查是否有新的通知

有时我的Api是关闭的。我的应用程序每2秒发送一次请求。现在我想在5次错误后实现这一点-应该有一个休息时间，例如10分钟。问题是，当我的api关闭时，我在浏览器控制台中收到许多错误（请参阅附件）

下面是我如何实现投票的

withPolling.js

import * as React from "react";
import { connect } from "react-redux";

export const withPolling = (pollingAction, duration = 2000) => Component => {
  const Wrapper = () =>
    class extends React.Component {
      componentDidMount() {
        this.props.pollingAction();
        this.dataPolling = setInterval(() => {
          this.props.pollingAction();
        }, duration);
      }
      componentWillUnmount() {
        clearInterval(this.dataPolling);
      }
      render() {
        return <Component {...this.props} />;
      }
    };
  const mapStateToProps = () => ({});
  const mapDispatchToProps = { pollingAction };
  return connect(mapStateToProps, mapDispatchToProps)(Wrapper());
};

import*as React from“React”；
从“react redux”导入{connect}；
export const with polling=（pollingAction，duration=2000）=>Component=>{
常量包装器=（）=>
类扩展了React.Component{
componentDidMount（）{
this.props.pollingAction（）；
this.dataPolling=setInterval（（）=>{
this.props.pollingAction（）；
}，持续时间）；
}
组件将卸载（）{
clearInterval（这是dataPolling）；
}
render（）{
返回；
}
};
常量mapStateToProps=（）=>（{}）；
常量mapDispatchToProps={pollingAction}；
返回连接（MapStateTrops，mapDispatchToProps）（Wrapper（））；
};

我的组件，它将被设置到我的导航栏中，当用户通过身份验证时发送轮询 NotificationsButtonNavbarWithPolling.jsx

import { loadNotifications } from "../../redux/actions/notificationAction";
import { withPolling } from "../../Utilities/withPolling";

class NotificationsButtonNavbarWithPolling extends React.Component {
  componentDidMount() {
    let headroom = new Headroom(document.getElementById("navbar-main"));
    // initialise
    headroom.init();
  }

  render() {
    return (
      <UncontrolledDropdown navbar-nav left>
        <DropdownToggle nav style={{ color: "#ffffff" }}>
          <i className="fa fa-bell nav-link-inner--text" />
        </DropdownToggle>

        <DropdownMenu right className="navbar-light">
          {this.props.notifications ? (
            <>
              {Object.entries(this.props.notifications).map(([key, value]) => (
                <DropdownItem key={key}>{value}</DropdownItem>
              ))}
              )}
            </>
          ) : (
            <>
              <Row>
                <Row>
                  <div>Notifications</div>
                </Row>
                <Row>
                  <div>There are no notifications yet.</div>
                </Row>
              </Row>
            </>
          )}
          <DropdownItem divider />
          <DropdownItem>
            <Button
              className="nav-link-inner--text ml-2"
              href="/allNotifications"
            >
              Show all Notifications
            </Button>
          </DropdownItem>
        </DropdownMenu>
      </UncontrolledDropdown>
    );
  }
}

const mapStateToProps = state => ({
  notifications: state.notifications
});

const mapDispatchToProps = {};

export default withPolling(loadNotifications)(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(NotificationsButtonNavbarWithPolling)
);

从“../../redux/actions/notificationAction”导入{loadNotifications}”；
从“../../Utilities/withPolling”导入{withPolling}”；
类NotificationsButtonNavbarWithPolling扩展React.Component{
componentDidMount（）{
let headloom=新的净空（document.getElementById（“navbar main”）；
//初始化
headloom.init（）；
}
render（）{
返回(
{this.props.notifications(
{Object.entries（this.props.notifications）.map（[key，value]）=>(
{value}
))}
)}
) : (
通知
目前还没有通知。
)}
显示所有通知
);
}
}
常量mapStateToProps=状态=>({
通知：state.notifications
});
常量mapDispatchToProps={}；
使用轮询导出默认值（loadNotifications）(
连接(
MapStateTops，
mapDispatchToProps
)（NotificationsButtonNavbarWithPolling）
);

请求将通过axios发送-没有什么特别之处。

---

你有什么想法吗？

看看图书馆。我想它会很适合你的需要。@IAmVisco非常感谢你。我已经看到axios重试了。但是由于轮询是通过withPolling.js文件进行的——我不确定在哪里可以实现axios重试。你认为呢？我应该把它放在哪里最好？我认为它应该靠近axios实例-所以在你传递的

pollingAction

函数中。