如何获取 XMLHttpRequest Promise 进度

Question

我正在使用 JS Promise 来重构我们的 JS API。但是我遇到了一个问题，让我无法继续前进。

基本上，我们的 API 之一是发出异步 GET 请求并下载大文件。

所以 API 的用法是这样的：

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

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

测试函数向 url 发出 XHR 请求并调用 onload 和 onerror 事件处理程序中的回调函数。

问题是在下载过程中，UI需要刷新，即进度条，在onprogress中处理。

callback.success 只会在 Promise 被 resolve 时被调用一次。那么我应该如何实现应该在测试函数的内部 XHR 组件的 onprogress 事件处理程序中调用的 UI 刷新回调？

Answer 1

由于 JavaScript 中的承诺只是状态机，因此无法获得承诺的进度。您将不得不使用其他方式。

例如这篇文章：

Answer 2

Promises 根本不是多个进度通知的良好架构匹配。 Promises 是一种单向状态机，旨在传达完成或错误 - 这实际上是它们的全部设计目的。他们没有任何内置的机制来进行多个进度通知。

相反，对于进度通知，您应该使用一些其他架构机制，例如每次调用的常规回调或触发多个进度事件的 eventEmitter。

在您目前展示的方案中，它可能看起来像这样：

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

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

然后，在您的 download() 函数中，您可以根据需要多次调用进度回调。

就我个人而言，我认为如果您只是 return 承诺并让他们自己提供解决和拒绝处理程序而不是隐藏承诺并让您的来电者接受这一年，这对您的来电者会更有用2013 回调架构。返回 promise 允许他们使用所有 promise 特性，例如链接、与其他 promise 的聚合、在他们自己的代码中的错误传播等...

因此，与其传递具有多个回调的 callback 对象，它们传递的只是进度回调，而您 return 返回一个承诺。然后，调用者可以在 returned 承诺上附加他们自己的解决和拒绝处理程序。现在是 2016 年，承诺在 ES6 中标准化。没有必要向您的来电者隐藏它们，并且有充分的理由 return 承诺，以便您的来电者也可以利用承诺的好处。

如何获取 XMLHttpRequest Promise 进度

How to get XMLHttpRequest Promise progress

javascript

ajax

xmlhttprequest

promise