XMLHttpRequest Promiseの進捗方法

Question

JS Promiseを使用してJS APIをリファクタリングしています。しかし、私はさらに進まなくなる問題に出会った。

基本的に、私たちのAPIの1つは、非同期GETリクエストを発行して大きなファイルをダウンロードすることです。

だから、APIの使い方は次のようになります

var callback = { 
    success: function(data){...}, 
    failure: function(data){...} 
}  

Test(token).download(url).then(callback.success, callback.failure); 

をテスト機能は、URLにXHRリクエストを行い、オンロード& ONERRORイベントハンドラにコールバック関数を呼び出します。

問題はダウンロード中に発生するため、UIは更新する必要があります。つまり、進行中の進行状況バーが表示されます。

callback.successは、Promiseが解決されたときに一度だけ呼び出されます。では、Test関数の内部XHRコンポーネントのonprogressイベントハンドラで呼び出されるUIリフレッシュコールバックをどのように実装する必要がありますか？

Answer 1

約束は、単に複数の進行状況の通知のための良い建築の試合ではありません。約束は、完了またはエラーを伝えることを目的とした一方通行の状態機械であり、それは本当にそれらのために設計されたものです。複数の進捗通知を行うためのメカニズムは組み込まれていません。

代わりに進捗通知のために、毎回呼び出される通常のコールバックや、複数の進捗イベントをトリガーするeventEmitterなどの他のアーキテクチャメカニズムが必要です。あなたがこれまでに示してきたスキームでは

、それはおそらく次のようになります。そして、

var callback = { 
    success: function(data){...}, 
    failure: function(data){...}, 
    progress: function(data){...} 
}  

Test(token).download(url, callback.progress).then(callback.success, callback.failure); 

、あなたのdownload()関数の中で、あなたは進捗コールバックに適切な限り多くの回数を呼び出します。

---

は個人的に、私はそれはあなただけの約束を返した場合、あなたの発信者にとってより有用であり、それらは決意を供給し、ハンドラそのものを拒否してみましょうと思うのではなく約束を隠し、あなたの発信者を作る2013年のコールバックアーキテクチャと一緒に暮らします。約束を返すことで、連鎖、他の約束との集約、自分のコードでのエラー伝播など、すべての約束機能を使用することができます。オブジェクトを複数のコールバックで渡すのではなく、すべて渡します。あなたは進歩のコールバックであり、あなたは約束を返す。呼び出し元は、返された約束に独自の解決および拒否ハンドラを添付できます。それは2016年であり、約束はES6で標準化されています。あなたの発信者からそれらを隠す必要はなく、あなたの発信者が約束のメリットを活用できるように、約束を返すあらゆる理由があります。

Answer 2

JavaScriptの約束はステートマシンだけなので、約束の進捗状況を得ることはできません。あなたは他の手段を使わなければなりません。

例えば、この記事を参照してください。progress notifications in ECMAScript Promise