Wie versucht man Ajax bei fehlgeschlagenem Reagieren js erneut?

Question

Ich habe die App mit react js erstellt. In dieser App habe ich eine Postanfrage. Wenn diese Anfrage fehlgeschlagen ist, möchte ich diese Anfrage bei einem Fehlerrückruf zurückrufen. Wie mit Ajax zu implementieren? Bitte überprüfen Sie den folgenden Code:

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

Sie können $ .ajax (this) nicht auf diese Weise verwenden. Die $ .ajax-Methode benötigt ein Objekt wie beim ersten Aufruf. Das "This" ist übrigens in Ihrem Code an Ihre Reak-Komponente gebunden. Ich denke, es gibt mehrere Lösungen, um Ihr Problem zu lösen. Eine einfache Möglichkeit ist, dass Sie die Funktion einfach erneut aufrufen können.

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