我有一个通过REST端点执行简单搜索的webapp。每次搜索都有0个或多个参数。如何防止这种情况?
User submits search request "A"
Before allowing "A" to return they modify their request and submit a new search request "B"
此时,用户希望看到“ B”的结果,但根据搜索返回的顺序,可能会显示一个。如何防止搜索结果填充表格中的“ A”?
我正在考虑根据搜索词创建哈希,将哈希与搜索请求一起发送,并将返回值中的哈希与最新提交的搜索条件的哈希进行比较,并且仅在哈希匹配。
我很抱歉以前没有问过这个问题,但是我找不到它。我正在使用Angular 1.4 UI和Java / Spring后端。我认为这可能是建立模式的常见问题。
您可以修饰$ http并将中止方法添加到返回的promise中。这将允许您检查实现中的Promise,并使用abort()取消先前的Promise请求(下面的doc块中的实现示例)。
;(function(angular, undefined) {
angular.module('app.appConfigs')
.config(httpDecoratorConfig);
function httpDecoratorConfig($provide) {
$provide.decorator('$http', decorateHttpWithAbort);
}
/**
* decorate $http response promise with an abort function.
* use this on destroy where you want to abort the outstanding request made on
* a page before leaving the page.
*
* @example
var requestPromise = $http(reqConfig).then(...).catch(...).finally(...);
$onDestroy() {
requestPromise.abort();
}
*/
function decorateHttpWithAbort(_, $q, $delegate) {
var originalHttpService = $delegate;
function newHttpServiceConstructor(requestConfig) {
var canceller = $q.defer();
var proxyRequest = $q.defer();
var onAbortCallback = angular.noop;
// adding abortFn into request promise
proxyRequest.promise.abort = function abortFn() {
canceller.resolve();
};
// by using onAbort capture the callback function which will be called
// when the request is aborted, use this to perform cleanups.
proxyRequest.promise.onAbort = function onAbortFn(callback) {
onAbortCallback = callback;
return this;
};
// adding request canceller promise in the original request config.
requestConfig.timeout = canceller.promise;
originalHttpService(requestConfig).then(
function onSuccess() {
proxyRequest.resolve.apply(this, arguments);
},
function onError(resp) {
// don't resolve the abort response with error instead call provided
// on abort callback to give user a change to handle abort case.
// natively angular abort is resolved with error.
if (resp.status === -1) {
onAbortCallback();
return;
}
proxyRequest.reject.apply(this, arguments);
},
function onNotification() {
proxyRequest.notify.apply(this, arguments);
}
);
return proxyRequest.promise;
}
// inherit all derived methods from original $http like $get, $put etc
_.assign(newHttpServiceConstructor, originalHttpService);
return newHttpServiceConstructor;
}
})(angular);