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

Getting the latest data from a promise returning service called repeatedly

本文关键字：服务 获取 最新 数据 返回 承诺 调用      更新时间：2023-09-26

我有一个angular服务，它为从服务器获取的数据返回一个promise。在固定的时间间隔内多次请求此数据，以保持显示的最新状态。响应有时会相当慢(最多10秒)，如果两个请求重叠，第一个请求最后响应，我将在应用程序中显示过期信息。时间轴将类似于:

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

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

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

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

好. .好的。一些基础设施。这是一个典型的例子，你真的需要Promise.cancel()，但我们没有在ES6原生承诺。作为一个库不可知论的人，我只是继续通过Promise子类创建一个。

下面的函数接受一个承诺，并通过添加一个不可枚举和不可配置的属性__cancelled__使其可取消。它还在不修改Promise.prototype的情况下将.then()和.cancel()方法添加到它的属性链中。因为可取消promise对象的原型是Promise.prototype，所以我们的可取消promise可以访问所有promise的东西。啊. .在我忘记之前;cancellable 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承诺，在2000毫秒内解析。我们将从这个函数中获得两个承诺，并将它们转换为可取消的承诺，称为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 msecs被解析，而cp0在1000 msecs被取消。

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

下面是我们将要使用的代码;

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()每1000msecs请求一个承诺。然而，getAsyncData()函数这次将给我们一个承诺，将在1~10秒内解决。这是因为我们希望一些稍后的承诺能够解决，而一些先前收到的承诺仍处于未解决状态。就像你的情况一样。好吧;在使接收到的承诺可取消后，runner()函数将其推入promises数组。只有在将promise推入promises数组之后，我们才将then指令附加到它上面，因为我们希望该数组只保存主promise，而不是从then阶段返回的promise。无论哪个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函数将无限期运行，如果你不停止它。所以在60001msecs时，我用clearInterval()清除它。在此期间，将接收60个承诺，只有第一个解析器将通过取消所有先前当前接收到的承诺来调用提供的回调，包括仍未解决的承诺，即在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);

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

相关文章：