取消在 Vue JS 中使用 fetch API 进行的先前调用答案

【问题标题】：Cancel previous call made using fetch API in Vue JS取消在 Vue JS 中使用 fetch API 进行的先前调用
【发布时间】：2020-11-09 13:24:55
【问题描述】：

我在 laravel + VueJS 应用程序中工作。其中有一个搜索功能，用户可以通过它搜索任何文本，然后 API 将根据搜索文本调用以获取数据。所以在 laravel 中调用 API “Fetch API”在 VueJS被使用。所以现在当任何用户按下任何关键字时，每次都会调用该方法以获取结果。因此，由于已经发送了多个请求。我只是喜欢在任何用户键入任何文本时这样做，然后每次之前的请求都必须被取消。我附在下面的代码用于调用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();
            }
        }

提前致谢！

【问题讨论】：

你真的应该也去抖动这个函数！请参阅 lodash 的 debounce 方法。
完全同意@KurtFriars This 视频解释得很好。

标签： laravel vue.js

【解决方案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。

【讨论】：

嘿，我已经尝试过你提供的代码，但使用它也会取消当前的请求。
@SohilChamadia 你有没有尝试为不同的请求使用不同的信号？
对于每个请求，信号都会不同？
是的，因为我们将信号作为参数传递给 fetch 函数，所以必须重新创建它。