javascript - 连续刷新页面axios会报一个Request aborted的错误？

Question

对项目进行测试，连续刷新页面，页面axios会报如上的错误，这个如何解决呢？

Answer 1

你刷新页面的时候接口还没完成就中断了,就会出现 aborted 了, 这是正常的, 不用管这个错误

Answer 2

axios.catch一下就不会报错了

Answer 3

当你在使用axios进行HTTP请求时，如果页面在请求完成之前被刷新或重定向，那么浏览器会取消这些挂起的请求，这可能会导致你看到的Request aborted错误。

要解决这个问题，你可以采取以下几种策略：

1. 取消请求：使用axios的取消功能来取消之前的请求，当页面开始刷新或导航到其他页面时。这可以通过创建一个CancelToken源并在每次请求时使用它来实现。

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// 当需要取消请求时
cancel();

2. 处理错误：在请求的.catch()块中捕获axios抛出的错误，并检查是否是取消请求的错误。如果是，你可以选择忽略它或进行其他适当的处理。

axios.get('/user/12345')
  .catch(function (thrown) {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      // 处理其他错误
    }
  });

3. 在页面卸载时取消请求：如果你使用的是像React这样的前端框架，你可以在组件卸载的生命周期方法（如componentWillUnmount或useEffect的清理函数）中取消请求。
4. 使用防抖/节流函数：如果你的请求是由于用户快速刷新页面或进行其他操作而频繁触发的，你可以考虑使用防抖（debounce）或节流（throttle）函数来限制请求的频率。
5. 优化你的代码逻辑：确保你的应用逻辑不会导致不必要的请求，尤其是在页面即将刷新或重定向的情况下。
6. 使用浏览器缓存：对于可以缓存的数据，使用浏览器的缓存机制来减少请求的数量和频率。

最后，请注意，虽然Request aborted错误通常是由于请求被取消而导致的，但它也可能是由其他原因引起的，如网络问题或服务器错误。因此，在解决此问题时，请确保仔细查看错误消息和上下文，以确定根本原因。