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

Question

我有一项 angular 服务，该服务 returns 承诺从服务器获取数据。以固定间隔多次请求此数据以保持显示最新。响应有时会非常慢（最多 10 秒），如果两个请求重叠并且第一个请求最后响应，我将在应用程序中显示过时的信息。时间表将是这样的：

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

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

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

Answer 1

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

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

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

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() 的效用函数，它 returns 我们使用标准的 ES6 promise，它在 2000 毫秒内解析。我们将从这个函数中获得两个承诺，并将它们变成可取消的承诺，称为 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 毫秒请求一个承诺。然而，getAsyncData() 函数这次会给我们一个将在 1~10 秒内解决的承诺。之所以如此，是因为我们希望一些后来的承诺能够解决，而一些先前收到的承诺仍处于未解决状态。就像你的情况一样。好的;在使收到的承诺可取消后，runner() 函数将其推入 promises 数组。只有在将 promise 推送到 promises 数组之后，我们才将 then 指令附加到它，因为我们希望数组只包含主要的 promise，而不是从 then 阶段返回的那些。哪个承诺首先解决并调用它的 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;
                                          };

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 个承诺，只有第一个解析器将通过取消所有 ~~previous~~ 当前收到的承诺来调用提供的回调，包括仍未解决的承诺，那些在第一个解决承诺之后收到的承诺在我们的 promises 数组中。然而，由于这些后来的承诺预计会包含更多新数据，因此人们可能希望让它们保持未取消状态。那么我想代码中的以下小改动在使用最新数据更频繁地刷新屏幕方面会做得更好。

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);

当然可能会有一些瑕疵。我想听听你的想法。

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

Getting the latest data from a promise returning service called repeatedly

javascript

promise

cancellation

angularjs