laravel - 取消之前在 Vue JS 中使用 fetch API 进行的调用

Question

我在 laravel + VueJS 应用程序中工作。因为有一个搜索功能，用户可以通过它搜索任何文本，然后调用 API 以根据搜索文本获取数据。所以在 VueJS 中调用 laravel 中的“Fetch API”API。所以现在当任何用户按下任何关键字时，每次都会调用该方法来获取结果。因此，由于已发送多个请求。我只想在任何用户键入任何文本时执行此操作，然后每次必须取消之前的请求。我在下面附加的代码用于调用 API 并获取数据。

            searchProperties(search) {

            if (search != null && search != '') {
                this.review = false;
                this.clearSes = false;
                fetch('/search/' + search)
                    .then(res => res.json())
                    .then(res => {
                        if (res.status === 200) {
                            this.properties = res.data.properties;
                        }
                    });

            } else {
                this.clearSuggestions();
            }
        }

提前致谢!

Answer 1

你能不能给个 abortable fetch像这样

const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => controller.abort(), 5000);

fetch(url, { signal }).then(response => {
  return response.text();
}).then(text => {
  console.log(text);
});

见 docs更多细节。