反応jsで失敗した場合にajaxを再試行する方法は？

Question

私はreact jsでアプリを作成しました。このアプリでは私は1つの投稿要求を持っています。このリクエストが失敗した場合は、エラーコールバック時にこのリクエストを呼び出す必要があります。どのように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メソッドでは、最初の呼び出し時と同じようにオブジェクトが必要です。 「this」は、コードの中で反応コンポーネントにバインドされています。私はあなたの問題を解決するために複数の解決策があると思います。簡単な方法は、関数をもう一度呼び出すことだけです。

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