在 cujojs 上中止 Xhr rest.js

Abort Xhr on cujojs rest.js

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

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

我的应用程序显示了一个分页的项目集合,人们可以通过单击 "next/prev" 按钮来浏览页面。 如果用户多次快速点击 'next' 按钮,每个新页面都会触发新请求。我想确保只有最新的请求开始运行,所有其他(未完成的)请求都被中止。

当我使用另一个工具执行我的请求时,我曾经使用 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 中,在做任何事情之前这样做:

  1. 检查request.canceled是否存在且等于true

  2. 如果满足条件则中止请求

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

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

现在我们正在做的是使用 javascripts 与生俱来的能力通过引用传递变量By reference 意味着当你给 create() 函数一个变量时 request 该函数使用相同的变量自身内部,而不是创建变量 request 的全新副本并使用该副本。

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

现在我们知道cujojs有2种取消请求的方法,我们可以在create()函数之后操作request变量收到它我们在我们这边做了一个简单的检查:

  1. 我们检查this.request是否为空(只有在没有发送请求时才会为空)

  2. 如果它不为空,我们检查 cujojs 是否已经在我们的 [= 上定义了 .cancel 函数47=]request 变量通过 'function' === typeof request.cancel

  3. 如果有我们可以使用这个功能来取消我们之前发送的请求, 如果没有,我们知道 cujojs 目前处于检查 .canceled 变量的步骤 request 变量所以我们将它分配给 true 做 this.request.canceled = true;

  4. 取消请求后,我们赋给request全新的值{}从而失去了reference 到我们之前操作的 request 变量

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

编码愉快