Как повторить попытку ajax при сбое в реакции js?

Question

Я создал приложение с помощью js. В этом приложении у меня есть один запрос на отправку. Если этот запрос не удался, я хочу отозвать этот запрос на обратный вызов. Как реализовать с помощью 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) 
    }); 
} 

Answer 1

Вы не можете использовать $ .ajax (this) таким образом. Для метода $ .ajax требуется объект, как и при первом вызове. «Это» связано с вашим компонентом реакции, кстати, в вашем коде. Я думаю, что есть несколько решений для решения вашей проблемы. Простым способом является то, что вы можете просто вызвать функцию снова.

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> 
    } 
    }