javascript - 从重复调用的 promise 返回服务中获取最新数据

Question

我有一个 Angular 服务，它返回对从服务器获得的数据的 promise 。以固定间隔多次请求此数据以保持显示最新。响应有时会非常慢(最多 10 秒)，如果两个请求重叠并且第一个请求最后响应，我将在应用程序中显示过时的信息。时间表是这样的:

- first request
Req ---------------------> Res
- second request
      Req -------> Res

目前，我保留了一个请求计数器，并让 .then 函数关闭它，如果数据太旧则丢弃该数据。我想知道是否有一个 promise 库已经这样做了，或者是否有一种标准的方法来做到这一点。

我也想过将响应时间戳添加到返回的对象，或者以某种方式使用 RxJs 之类的东西，但我没有用它来知道它是否适用。

Answer 1

TL&DR:我们在这里发明了可取消的 promise 。

嗯..好的。一些基础设施。这是一个典型的例子，你确实需要 Promise.cancel() 但是我们在 ES6 原生 promises 中没有它。作为一个图书馆不可知论者，我只是继续通过 Promise 子类发明一个。

以下函数接受一个 promise ，并通过添加一个名为 __cancelled__ 的不可枚举和不可配置的属性使其可取消它还添加了 .then() 和 .cancel() 方法到它的属性链，而不修改 Promise.prototype。由于可取消的 promise 对象的 proptotype 的原型(prototype)是 Promise.prototype，我们的可取消的 promise 可以访问所有的 Promise 事物。啊..在我忘记之前；可取消原型(prototype)的 then 方法也返回一个可取消的 promise 。

function makePromiseCancellable(p){
  Object.defineProperty(p,"__cancelled__", {        value: false,
                                                 writable: true,
                                               enumerable: false,
                                             configurable: false
                                           });
  Object.setPrototypeOf(p,makePromiseCancellable.prototype);
  return p;
}

makePromiseCancellable.prototype = Object.create(Promise.prototype);
makePromiseCancellable.prototype.then   = function(callback){
                                            return makePromiseCancellable(Promise.prototype.then.call(this,function(v){
                                                                                                             !this.__cancelled__ && callback(v);
                                                                                                           }.bind(this)));
                                          };
makePromiseCancellable.prototype.cancel = function(){
                                            this.__cancelled__ = true;
                                            return this;
                                          };

所以我们有一个名为 getAsyncData() 的实用函数，它返回一个标准的 ES6 promise，它在 2000 毫秒内解析。我们将从这个函数中获得两个 promise ，并将它们变成可取消的 promise ，分别称为 cp0 和 cp1。然后我们将在 1000 毫秒处取消 cp0，看看会发生什么。

function getAsyncData(){
  var dur = 2000;
  return new Promise((v,x) => setTimeout(v.bind(this,"promise id " + pid++ + " resolved at " + dur + " msec"),dur));
}

function makePromiseCancellable(p){
  Object.defineProperty(p,"__cancelled__", {        value: false,
                                                 writable: true,
                                               enumerable: false,
                                             configurable: false
                                           });
  Object.setPrototypeOf(p,makePromiseCancellable.prototype);
  return p;
}

makePromiseCancellable.prototype = Object.create(Promise.prototype);
makePromiseCancellable.prototype.then   = function(callback){
                                            return makePromiseCancellable(Promise.prototype.then.call(this,function(v){
                                                                                                             !this.__cancelled__ && callback(v);
                                                                                                           }.bind(this)));
                                          };
makePromiseCancellable.prototype.cancel = function(){
                                            this.__cancelled__ = true;
                                          };
var pid = 0,
    cp0 = makePromiseCancellable(getAsyncData());
    cp1 = makePromiseCancellable(getAsyncData());
cp0.then(v => console.log(v));
cp1.then(v => console.log(v));

setTimeout(_ => cp0.cancel(),1000);

哇……!极好的。 cp1 在 2000 毫秒时解析，而 cp0 在 1000 毫秒时取消。

现在，既然我们现在有了基础设施，我们就可以用它来解决您的问题。

以下是我们将要使用的代码；

function getAsyncData(){
  var dur = ~~(Math.random()*9000+1001);
  return new Promise((v,x) => setTimeout(v.bind(this,"promise id " + pid++ + " resolved at " + dur + " msec"),dur));
}

function runner(fun,cb){
  var promises = [];
  return setInterval(_ => { var prom = makePromiseCancellable(fun());
                            promises.push(prom);
                            promises[promises.length-1].then(data => { promises.forEach(p => p.cancel());
                                                                       promises.length = 0;
                                                                       return cb(data);
                                                                     });
                          },1000);
}

var pid = 0,
    sid = runner(getAsyncData,v => console.log("received data:", v));
setTimeout(_=> clearInterval(sid),60001);

这是非常基本的。 runner() 函数正在执行这项工作。它通过调用 getAsyncData() 每 1000 毫秒请求一次 promise 。 getAsyncData() 函数不过这次会给我们一个将在 1~10 秒内解决的 promise 。之所以如此，是因为我们希望一些后来的 promise 能够解决，而一些先前收到的 promise 仍处于未解决状态。就像你的情况一样。好的;在使接收到的 promise 可取消后，runner() 函数将其推送到 promises 数组中。只有在将 promise 推送到 promises 数组之后，我们才将 then 指令附加到它，因为我们希望该数组只包含主要的 promise，而不是从 then 阶段返回的那些.哪个 promise 先解析并调用它的 then 方法，将首先取消数组中的所有 promise，然后清空数组；只有在那之后才会调用提供的回调函数。

现在让我们看看整个过程。

function makePromiseCancellable(p){
  Object.defineProperty(p,"__cancelled__", {        value: false,
                                                 writable: true,
                                               enumerable: false,
                                             configurable: false
                                           });
  Object.setPrototypeOf(p,makePromiseCancellable.prototype);
  return p;
}

makePromiseCancellable.prototype = Object.create(Promise.prototype);
makePromiseCancellable.prototype.then   = function(callback){
                                            return makePromiseCancellable(Promise.prototype.then.call(this,function(v){
                                                                                                             !this.__cancelled__ && callback(v);
                                                                                                           }.bind(this)));
                                          };
makePromiseCancellable.prototype.cancel = function(){
                                            this.__cancelled__ = true;
                                            return this;
                                          };

function getAsyncData(){
  var dur = ~~(Math.random()*9000+1001);
  return new Promise((v,x) => setTimeout(v.bind(this,"promise id " + pid++ + " resolved at " + dur + " msec"),dur));
}

function runner(fun,cb){
  var promises = [];
  return setInterval(_ => { var prom = makePromiseCancellable(fun());
                            promises.push(prom);
                            promises[promises.length-1].then(data => { promises.forEach(p => p.cancel());
                                                                       promises.length = 0;
                                                                       return cb(data);
                                                                     });
                          },1000);
}

var pid = 0,
    sid = runner(getAsyncData,v => console.log("received data:", v));
setTimeout(_=> clearInterval(sid),60001);

如果您不停止 runner 函数，它将无限期地运行。所以在 60001 毫秒时，我通过 clearInterval() 清除它。在此期间将收到 60 个 promise ，只有第一个解析器将通过取消当前收到的所有先前 promise 来调用提供的回调，包括仍 Unresolved promise ，那些在我们的第一个解决 promise 之后收到的promises 数组。然而，由于这些后来的 promise 预计会包含更多新数据，因此人们可能希望让它们保持未取消状态。那么我想代码中的以下小改动在使用最新数据更频繁地刷新屏幕方面会做得更好。

function makePromiseCancellable(p){
  Object.defineProperty(p,"__cancelled__", {        value: false,
                                                 writable: true,
                                               enumerable: false,
                                             configurable: false
                                           });
  Object.setPrototypeOf(p,makePromiseCancellable.prototype);
  return p;
}

makePromiseCancellable.prototype = Object.create(Promise.prototype);
makePromiseCancellable.prototype.then   = function(callback){
                                            return makePromiseCancellable(Promise.prototype.then.call(this,function(v){
                                                                                                             !this.__cancelled__ && callback(v);
                                                                                                           }.bind(this)));
                                          };
makePromiseCancellable.prototype.cancel = function(){
                                            this.__cancelled__ = true;
                                            return this;
                                          };

function getAsyncData(){
  var dur = ~~(Math.random()*9000+1001);
  return new Promise((v,x) => setTimeout(v.bind(this,"promise id " + pid++ + " resolved at " + dur + " msec"),dur));
}

function runner(fun,cb){
  var promises = [];
  return setInterval(_ => { var prom = makePromiseCancellable(fun());
                            promises.push(prom);
                            promises[promises.length-1].then(data => { var prix = promises.indexOf(prom);
                                                                       promises.splice(0,prix)
                                                                               .forEach(p => p.cancel());
                                                                       return cb(data);
                                                                     });
                          },1000);
}

var pid = 0,
    sid = runner(getAsyncData,v => console.log("received data:", v));
setTimeout(_=> clearInterval(sid),60001);

当然可能会有一些缺陷。我想听听你的想法。