在 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 中,在做任何事情之前这样做:
检查request.canceled是否存在且等于true
如果满足条件则中止请求
如果request.canceled不存在则继续并进入下一步
- cujojs 定义了 request.cancel 函数,它可以在发送之前中止请求(我们不关心步骤之后因为取消是我们的意图)
现在我们正在做的是使用 javascripts 与生俱来的能力通过引用传递变量。 By reference 意味着当你给 create() 函数一个变量时 request 该函数使用相同的变量自身内部,而不是创建变量 request 的全新副本并使用该副本。
我们在这里利用它的方式是我们从 cujojs 外部操纵 request 变量,知道它使用相同的变量因此我们的操作将直接影响 request 变量 cujojs 在执行时使用 create()函数。
现在我们知道cujojs有2种取消请求的方法,我们可以在create()函数之后操作request变量收到它我们在我们这边做了一个简单的检查:
我们检查this.request是否为空(只有在没有发送请求时才会为空)
如果它不为空,我们检查 cujojs 是否已经在我们的 [= 上定义了 .cancel 函数47=]request 变量通过 'function' === typeof request.cancel
如果有我们可以使用这个功能来取消我们之前发送的请求,
如果没有,我们知道 cujojs 目前处于检查 .canceled 变量的步骤 request 变量所以我们将它分配给 true 做 this.request.canceled = true;
取消请求后,我们赋给request全新的值{}从而失去了reference 到我们之前操作的 request 变量
我很不擅长解释事情,但我希望你能理解,了解这些细微差别将对你的发展有很大帮助。
编码愉快
我正在使用 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 中,在做任何事情之前这样做:
检查request.canceled是否存在且等于true
如果满足条件则中止请求
如果request.canceled不存在则继续并进入下一步
- cujojs 定义了 request.cancel 函数,它可以在发送之前中止请求(我们不关心步骤之后因为取消是我们的意图)
现在我们正在做的是使用 javascripts 与生俱来的能力通过引用传递变量。 By reference 意味着当你给 create() 函数一个变量时 request 该函数使用相同的变量自身内部,而不是创建变量 request 的全新副本并使用该副本。
我们在这里利用它的方式是我们从 cujojs 外部操纵 request 变量,知道它使用相同的变量因此我们的操作将直接影响 request 变量 cujojs 在执行时使用 create()函数。
现在我们知道cujojs有2种取消请求的方法,我们可以在create()函数之后操作request变量收到它我们在我们这边做了一个简单的检查:
我们检查this.request是否为空(只有在没有发送请求时才会为空)
如果它不为空,我们检查 cujojs 是否已经在我们的 [= 上定义了 .cancel 函数47=]request 变量通过 'function' === typeof request.cancel
如果有我们可以使用这个功能来取消我们之前发送的请求, 如果没有,我们知道 cujojs 目前处于检查 .canceled 变量的步骤 request 变量所以我们将它分配给 true 做 this.request.canceled = true;
取消请求后,我们赋给request全新的值{}从而失去了reference 到我们之前操作的 request 变量
我很不擅长解释事情,但我希望你能理解,了解这些细微差别将对你的发展有很大帮助。
编码愉快