我正在使用cujojs/rest将请求发送到我的(laravel)API。我正在寻找一种取消新请求时未结束的请求的方法。

客户端上有一个cancel方法,可能是我需要解决的问题:

我的应用程序显示了分页的项目集合,人们可以通过单击“下一个/上一个”按钮来浏览页面。
如果用户快速单击“下一步”按钮多次,则每个新页面都会触发新请求。我想确保只有最新的请求得到处理,而其他所有(未完成的)请求都被中止。

当我使用另一个工具执行请求时,我曾经使用beforeSend方法来执行此操作。它将xhr对象添加到数组,并且在激发请求之前,如果未结束,它将在该数组中的所有xhr上调用.abort()。

现在,我切换到cujojs / rest,我不知道如何使用cancel方法完成此任务。

当然,我不想在运行一个新请求之前就中止任何请求,而只是那些使用与我可能在其他地方加载无关数据的资源相同的请求。

/users?page=1 -> should be canceled
/users?page=2 -> should be canceled
/preferences  -> should NOT be canceled
/users?page=3 -> should be canceled
/users?page=4 -> should go through as its the last one


任何帮助将不胜感激。

最佳答案

我不确定,因为据我所知没有适当的文档。但是从源代码来看,您应该可以执行以下操作

//lets say you defined **this.request** somewhere in the constructor to hold the request value which defaults to empty object {};

fetchCollection: function(id) {

var that = this;
var url = 'collections/' + id;

if( Object.keys( that.request ).length !== 0 ) {

    if( 'function' === typeof that.request.cancel )
         that.request.cancel();
    else
         that.request.canceled = true;

  //here we should re-assign the default {} value again
  that.request = {};


}
that.request.path = url;

return client( that.request ).then(
        function(response){
            that.collection = response.entity.data;
        },
        function(response){
            console.error(response.status.code, response.status);
        }
    );
},


如果有效,我可以解释原因。

好吧,现在当它起作用时,我可以解释为什么使用伪代码:

在执行任何操作之前,先在client(request)函数cujojs中执行以下操作:


检查request.canceled是否存在并且等于true
如果满足条件则中止请求


如果request.canceled不存在,它将继续并进入下一步


cujojs定义了request.cancel函数,该函数可以在请求发送之前中止请求(我们不关心之后的步骤,因为取消是我们的意图)


现在,我们正在使用javascript固有的功能来通过引用传递变量。通过引用意味着,当您向create()函数提供变量请求时,该函数将在其内部使用此相同变量,而不是创建变量请求的全新副本并使用该副本。

我们在此处利用此方法的方式是,我们从cujojs外部操作请求变量,因为它知道它正在使用相同的变量,因此我们的操作将直接影响cujojs在执行create()函数时使用的请求变量。

既然我们知道cujojs有2种取消请求的方法,并且我们可以在create()函数收到请求后处理请求变量,那么我们就可以进行以下简单检查:


我们检查this.request是否为空(仅当尚未发送请求时才为空)
如果不为空,我们通过执行'function'=== typeof request.cancel来检查cujojs是否已经在请求变量中定义了.cancel函数。
如果可以的话,我们可以使用此功能取消我们之前发送的请求,
如果还没有,我们就知道cujojs现在就在检查请求变量中的.canceled变量的步骤中,因此我们执行this.request.canceled = true;
取消请求后,我们为请求分配了全新的值{},从而丢失了对我们先前操作的先前请求变量的引用


我很不擅长解释事物,但我希望您能理解,知道这些细微差别将对您的发展有很大帮助。

快乐编码

09-25 15:56