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

Question

我有一个角度服务，它返回从服务器获取的数据的承诺。在固定间隔内多次请求此数据以使显示保持最新。响应有时可能非常慢（最多10秒），如果两个请求重叠并且第一个请求最后响应，我将得到应用程序中显示的过期信息。时间表如下：

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

目前我保留了一个请求计数器并使.then函数关闭它并丢弃数据，如果它太旧了。我想知道其中一个承诺库是否已经存在，或者是否有标准的方法来实现它。

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

Answer 1

TL＆amp; DR：我们在这里发明了可取消的承诺。

好吧..好吧。一些基础设施这是一个典型的例子，你确实需要Promise.cancel()但是我们在ES6原生承诺中没有它。作为一个与图书馆无关的人，我只是继续发明一个由Promise子分类。

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

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承诺，它在2000 msecs内解析。我们将从此函数中获得两个promise，并将它们转换为名为cp0和cp1的可取消承诺。然后我们将取消cp0 1000 msecs，看看会发生什么。

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毫秒请求一个承诺。 getAsyncData()函数这次会给我们一个在1~10秒内解决的承诺。这是因为我们希望一些后来的承诺能够解决，而一些先前收到的承诺仍处于未解决的状态。就像你的情况一样。好;在使接收的承诺可取消后，runner()函数将其推送到promises数组中。只有在将promise发送到promises数组之后，我们才会将then指令附加到它，因为我们希望数组只保存主承诺，而不是then阶段返回的承诺。哪个承诺首先解析并调用它的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函数将无限期地运行。所以在60001msecs我用clearInterval()清除它。在此期间，将收到60个承诺，只有第一个解析器将通过取消所有以前当前收到的承诺来调用所提供的回调，包括尚未解决的承诺，即我们在{第一个解决承诺后收到的承诺{1}}数组。然而，由于这些后来的承诺预计会包含更多新鲜数据，因此人们可能希望将它们保持不变。然后，我认为代码中的以下小变化在使用最新数据更频繁地刷新屏幕方面会做得更好。

promises

当然可能存在一些缺陷。我想听听你的意见。