我正在开发一个项目,我们使用搜索栏从服务器搜索数据,并且我们在每个字符类型上调用API。
由于如果用户在搜索栏中键入10-20个字符,它将调用20个请求。
在19个请求中根本不需要,所以我想取消离子3中高级HTTP插件的所有perior请求。
有没有办法取消已经在进行中的请求?
我正在使用以下代码进行HTTP调用:
this.httpPlugin.setRequestTimeout(60);
// this.httpPlugin.setHeader("content-type", "application/json");
this.httpPlugin.setHeader('authorization', "Bearer " + token);
console.log('Requested URL :-', this.url + 'faqmsDetails/faList?caseNum=' + searchText);
this.httpPlugin.get(this.url + searchText, {}, {}).then((response) => {
console.log("Response Success : " + JSON.stringify(response));
let jsonResponse = JSON.parse(response.data);
console.log("JSON OBJECT RESPONSE : " + jsonResponse);
resolve(jsonResponse);
}).catch(error => {
reject(error);
});
我经常搜索,但没有找到任何富有成效的解决方案。
对于搜索延迟,我使用了搜索标签的 debounce 属性,这有助于我在用户输入时延迟搜索,但仍有一些请求在处理中不受欢迎,因此我想取消该请求。
如果有任何人有任何解决方案或建议,请告诉我。
答案 0 :(得分:0)
debounce
是您在自动搜索案例中所需要的。尾部输入将被视为已确认的输入,与提交按钮单击完全相同,即使最终结果是不需要的。
我不熟悉下面的httpPlugin。如果基于XMLHttpRequest,则它是可取消的。如果基于fetch API,则不可取消。无论如何,你可以抛弃不需要的请求。
更优雅的解决方案是引入rxjs。见https://github.com/Reactive-Extensions/RxJS/blob/master/examples/autocomplete/autocomplete.js
更新
无法控制这些事件流。我认为rxjs在这种情况下是值得的。
<!doctype html>
<html>
<head>
<script src="https://cdn.bootcss.com/rxjs/5.4.3/Rx.js"></script>
</head>
<body>
<input />
<button>clear</button>
<span id="result"></span>
<script>
function searchData(keyword) {
console.log('to search: ' + keyword)
return new Promise(resolve => {
if (keyword) {
setTimeout(() => resolve('result of ' + keyword), 2000)
} else {
resolve('cleared')
}
})
}
const input = document.querySelector('input')
const clear = document.querySelector('button')
const result = document.getElementById('result')
const input$ = Rx.Observable.fromEvent(input, 'keyup')
.map(e => e.target.value)
.debounceTime(300)
const clear$ = Rx.Observable.fromEvent(clear, 'click')
.map(() => {
input.value = ''
return ''
})
const search$ = Rx.Observable.merge(input$, clear$)
.distinctUntilChanged()
.switchMap(searchData)
.subscribe(data => {
result.innerHTML = data
console.log(data)
})
</script>
</body>
</html>