ajaxタイムアウトを正しく処理する方法

Question

たとえば、ユーザーがログインしたい、接続が遅い、または要求が一部のネットワークに滞留している場合、ユーザーは待機しますが、待機するよりも要求を再送信する方が良い場合があります。

質問：

• 望ましい待ち時間でしょうか？ （ファイルをアップロードしないで、単純なログイン ）私は15秒を置いたが、多分それは多すぎる。
• 最適なソリューションは何ですか？

1））アヤックスタイムアウトに

$.ajax({ 

url: '{{ url('/login') }}', 
data: data, 
method: 'POST', 
timeout: 15000, 

を設定し、エラー

error: function(data, status, error){ 

if(status==="timeout") { 
var errorString = 'Please retry. Ref Timeout';      
} 

3それらを表示）彼は再び

2をログインをクリックすると決定したまで待っているユーザーをキープ自動再試行を行う（code）

$.ajax({ 
url : 'someurl', 
type : 'POST', 
data : ...., 
tryCount : 0, 
retryLimit : 3, 
... 
error: function(data, status, error){ 
    if (status == 'timeout') { 
     this.tryCount++; 
     if (this.tryCount <= this.retryLimit) { 
     //try again 
      $.ajax(this); 
      return; 
     }    
     return; 
    } 

4）

setTimeout(function(){ 
    $.ajax({...}) 
}, 15000); 

5 AJAXの上にラッパー関数を使用します）Some other options

Answer 1

私は個人的に意味のミックスを、だろう、2回を試してみて、秋、このコードを使用することができます：

$.ajax({ 

    url: '{{ url('/login') }}', 
    data: data, 
    method: 'POST', 
    timeout: 10000, // sets timeout to 5000 = 5 seconds 
    retryCount: 0, // start retry count 
    retryLimit: 1, //will let you retry a determined number of times 

error: function(data, status, error){  

if(status==="timeout") { 
    this.retryCount++; 
    if (this.retryCount <= this.retryLimit) { //&& Date.now() - this.created < this.retryTimeout 
     console.log("Retrying"); 
     $.ajax(this); 
     return; 
} 
else{ 
    var errorString = 'Timeout';       
} 

Answer 2

デフォルトのサーバーのタイムアウトは30代なので、それは、Ajaxで適切なタイムアウトです。

再ログインでサーバーを砲撃しないでください（あまりにも忙しい場合は、さらに悪化させます）。

リクエストが保留中のときにもう一度ログインボタンをクリックできないようにします。

---

はIMOタイムアウトなしのAjaxがなければならないとエラーに後で再試行するようユーザーに伝える必要があります。

$.ajax({ 
    error: function (response) { 
     console.error(response); // Show error response to dev 

     alert('Something went wrong. Please try again later or contact administrator admin@email.com'); // Use pretty modal instead 
    } 
}) 

Answer 3

あなたは可能性があり、あなたは戦略を再試行し、コードロットクリーナーを維持定義することができますhttps://github.com/inmar/patience_jsのようなライブラリ。

いっそRxJS

1は、ここで提案のように、あなたがアプローチを使用することができます

を見てみましょう：RxJS retry operator with ajax call

const doLogin =() => { 
    console.log('calling'); 
    return $.ajax('...') 
}; 

const stream = Rx.Observable.fromPromise(doLogin).retry(3); 

stream.subscribe(log);