如何停止已在高级http插件中发送HTTP请求

时间:2018-02-23 12:32:35

标签: http ionic3

我正在开发一个项目,我们使用搜索栏从服务器搜索数据,并且我们在每个字符类型上调用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 属性,这有助于我在用户输入时延迟搜索,但仍有一些请求在处理中不受欢迎,因此我想取消该请求。

如果有任何人有任何解决方案或建议,请告诉我。

1 个答案:

答案 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>