Javascript 如何在react js失败时重试ajax？

我用react js创建了这个应用程序。在这个应用程序中，我有一个post请求。如果此请求失败，我希望在错误回调时调用此请求。如何使用ajax实现？请检查下面的代码

handleSubmit() {
    var resObj = {
        "TITLE":this.state.title,
        "NAME":this.state.name
    };
    $.ajax({
        url:url+"activity"+id,
        type:"PUT",
        data:JSON.stringify(resObj),
        dataType:'json',
        headers:{"content-type": "application/json", "Authorization":localStorage.getItem('token')},
        success:function(data, status){
        }.bind(this),
        error:function(xhr, status, err, data){
            if(xhr.status == 401 || xhr.status == 500 || xhr.status == 200) {
                $.ajax(this);
            }
        }.bind(this)
    });
}

您不能以这种方式使用$.ajax（this）。$。ajax方法需要一个对象，就像第一次调用时一样。“this”通过代码中的方式绑定到react组件。我认为有多种解决方案可以解决你的问题。一种简单的方法是，您可以再次调用该函数

class RetryHandler{
    constructor(option){
      const defaultOptions = {
         // you can add default options here like maxRetry = 10, 
      };
      this.options = Object.assign({},defaultOptions,option);
      this.doSubmit();
    }

    doSubmit(){
      $.ajax({
        url:this.options.url,
        type:this.options.type,
        data:this.options.data,
        dataType:this.options.dataType,
        headers:this.options.headers,
        success:this.options.success,
        error:function(xhr, status, err, data){
            let args = Array.prototype.slice.call(arguments);
            args.push(this.doSubmit.bind(this));
            this.options.error.apply(this,args);
        }.bind(this)
      })

    }
 }

}



class App extends Component{

    handleSubmit() {

          new RetryHandler({
          url:"/mia",
          type:"POST",
          data:{name:"hello"},
          success:function(data, status){},
          error:function(xhr, status, err ,retry){
              setTimeout(function(){
                retry(); <-- on your error callback, you now have a retry function available, you just simply call this if you want to retry
              },1000);
          }
          });

    }

    render(){
      return <div onClick={this.handleSubmit.bind(this)}>Hello</div>
    }
  }

类RetryHandler{
构造函数（选项）{
const defaultOptions={
//您可以在此处添加默认选项，如maxRetry=10，
};
this.options=Object.assign（{}，defaultOptions，option）；
这是doSubmit（）；
}
doSubmit（）{
$.ajax({
url:this.options.url，
类型：this.options.type，
数据：this.options.data，
数据类型：this.options.dataType，
标题：this.options.headers，
成功：这个。选项。成功，
错误：函数（xhr、状态、错误、数据）{
让args=Array.prototype.slice.call（参数）；
args.push（this.doSubmit.bind（this））；
this.options.error.apply（this，args）；
}.绑定（此）
})
}
}
}
类应用程序扩展组件{
handleSubmit（）{
新RetryHandler({
url:“/mia”，
类型：“POST”，
数据：{name:“hello”}，
成功：函数（数据、状态）{}，
错误：函数（xhr、状态、错误、重试）{
setTimeout（函数（）{
retry（）；您不能以这种方式使用$.ajax（this）。$.ajax方法需要一个对象，就像您在第一次调用时所做的那样。“this”通过代码中的方式绑定到您的react组件。我认为有多种解决方案可以解决您的问题。一种简单的方法是，您可以再次调用该函数

class RetryHandler{
    constructor(option){
      const defaultOptions = {
         // you can add default options here like maxRetry = 10, 
      };
      this.options = Object.assign({},defaultOptions,option);
      this.doSubmit();
    }

    doSubmit(){
      $.ajax({
        url:this.options.url,
        type:this.options.type,
        data:this.options.data,
        dataType:this.options.dataType,
        headers:this.options.headers,
        success:this.options.success,
        error:function(xhr, status, err, data){
            let args = Array.prototype.slice.call(arguments);
            args.push(this.doSubmit.bind(this));
            this.options.error.apply(this,args);
        }.bind(this)
      })

    }
 }

}



class App extends Component{

    handleSubmit() {

          new RetryHandler({
          url:"/mia",
          type:"POST",
          data:{name:"hello"},
          success:function(data, status){},
          error:function(xhr, status, err ,retry){
              setTimeout(function(){
                retry(); <-- on your error callback, you now have a retry function available, you just simply call this if you want to retry
              },1000);
          }
          });

    }

    render(){
      return <div onClick={this.handleSubmit.bind(this)}>Hello</div>
    }
  }

类RetryHandler{
构造函数（选项）{
const defaultOptions={
//您可以在此处添加默认选项，如maxRetry=10，
};
this.options=Object.assign（{}，defaultOptions，option）；
这是doSubmit（）；
}
doSubmit（）{
$.ajax({
url:this.options.url，
类型：this.options.type，
数据：this.options.data，
数据类型：this.options.dataType，
标题：this.options.headers，
成功：这个。选项。成功，
错误：函数（xhr、状态、错误、数据）{
让args=Array.prototype.slice.call（参数）；
args.push（this.doSubmit.bind（this））；
this.options.error.apply（this，args）；
}.绑定（此）
})
}
}
}
类应用程序扩展组件{
handleSubmit（）{
新RetryHandler({
url:“/mia”，
类型：“POST”，
数据：{name:“hello”}，
成功：函数（数据、状态）{}，
错误：函数（xhr、状态、错误、重试）{
setTimeout（函数（）{
retry（）；我的组件中有这么多这样的处理程序操作。如何使此操作成为全局操作？您可以简单地用一个模块包装它。我为您制作了一个非常简单的操作。我得到以下错误“TypeError:retry不是一个函数。（在“retry（）”中，“retry”是未定义的）我的组件中有这么多这样的处理程序操作。如何使此操作成为全局操作？您可以简单地用一个模块包装它。我为您制作了一个非常简单的操作。我得到以下错误“TypeError:retry不是一个函数。（在“retry（）”中，“retry”是未定义的）