アングル5：API呼び出しのシリアライズ

Question

同じAPIリクエストを再度送信する前に、APIが完了するのを待つ方法を教えてください。

私は、ユーザーが何かを入力したときに私はAPI呼び出しを行うフォームを持っています。ユーザーが入力を更新すると、前のAPI呼び出しが終了するまで待つことにします。私が持っている場合、私は、例えば、角5

を使用しています

、以下、私は二回のonClickをトリガし、私は2番目の呼び出しは、最初の1が完了した後にのみ開始します。

component: 
onClick() { 
    this.http.post(this.url, payload, options); 
} 

これを実現するにはどうすればflatMapWithMaxConcurrentを使用できますか？

Answer 1

私はあなたが単にような何かを探していると思う：

class MyComponent { 
    lastCall: Observable 

    onClick() { 
     let newCall = this.http.post(url); 

     if (this.lastCall) { 
      this.lastCall = this.lastCall.concat(newCall) 
     } 
     else { 
      this.lastCall = newCall 
     } 

     return this.lastCall 
    } 
} 

これはメンバーlastCallで以前に行われた呼び出しを追跡します。ユーザが最初にクリックすると、nullになり、メソッドは単に投稿の結果を返します。しかし、2回目には、前の呼び出しを最初に実行した後に新しい呼び出しを実行した結果であるobservableが戻されます。古いコールが終了した場合は新しいコールが直ちに実行されますが、それ以外の場合は前のコールが終了するのを待ちます。

しかし、これは実際にあなたが探している動作であるかどうかはわかりません。ユーザーが何度もクリックしてバックエンドが遅い場合、ユーザーがクリックを停止した後も長く続く多数の呼び出しが順番に繰り返されます。

私は、通話がすでに進行中であるかどうかを把握したいと思う可能性が高いと思います。これは、例えば、バックエンドが遅く、フロントエンドが応答しなくなったために再度クリックした場合に、ユーザーが誤って何度も何かを送信してしまうことを防止します。

あなたは次のようにそれを達成することができます

class MyComponent { 
    isPosting: boolean 

    onClick() { 
    if (this.isPosting) { 
     return 
    } 

    this.isPosting = true 

    return this.http.post(url) 
     .finally(() => this.isPosting = false) 
    } 
} 

Answer 2

コールの順序が重要な場合は、concatを使用して2つのAPI呼び出しをマージすることができます。

const result = callOne.concat（callTwo）;

result.subscribe（ヴァル=> ...）