我有一个JS函数，当用户点击一个图像，调用一个axios请求到我的后端执行，并获得价格，问题是，用户可以点击不同的图像在任何时候和后端需要5-10秒，以获得响应和价格更新多次，因为用户可以点击5个不同的图像（块图像不是一个选项）.我如何解决只得到用户点击的最后一张图片的价格而忽略其他请求？
nfs0ujit1#
从版本v0.22.0开始，Axios支持AbortController取消请求。您可以先创建一个中止控制器，在获取新请求之前中止该控制器。如下所示：
const controller = new AbortController(); function handleClick(){ // cancel the request controller.abort(); axios.get('/foo/bar', { signal: controller.signal }).then(function(response) { //... }); }
请查看Axios docs官方网站上关于此主题的信息。
olqngx592#
您可以对发出请求的函数进行去抖动。去抖动会在函数上设置一个计时器，该计时器在设置的时间范围内对该特定函数的后续调用时重置。在这里，我使用了underscore.js提供的去抖动功能
handleClick () { _.debounce(loadData, 300); // Debounce calls to load data by 300ms } loadData () { // sends the axios request to fetch pricing info }
例如：用户点击一个图像，handleClick被调用。如果用户在300 ms内没有再次点击任何图像，loadData被调用并执行请求。如果用户在指定的300 ms内单击了图像，则计时器重新开始;因此，只有在给定时间范围内的最后一次点击才算。
handleClick
loadData
gv8xihay3#
我认为您可以使用abort controller在用户单击另一个图像时取消请求。
3条答案
按热度按时间nfs0ujit1#
从版本v0.22.0开始，Axios支持AbortController取消请求。您可以先创建一个中止控制器，在获取新请求之前中止该控制器。如下所示：
请查看Axios docs官方网站上关于此主题的信息。
olqngx592#
您可以对发出请求的函数进行去抖动。去抖动会在函数上设置一个计时器，该计时器在设置的时间范围内对该特定函数的后续调用时重置。
在这里，我使用了underscore.js提供的去抖动功能
例如：用户点击一个图像，
handleClick被调用。如果用户在300 ms内没有再次点击任何图像，loadData被调用并执行请求。如果用户在指定的300 ms内单击了图像，则计时器重新开始;因此，只有在给定时间范围内的最后一次点击才算。
gv8xihay3#
我认为您可以使用abort controller在用户单击另一个图像时取消请求。