Axios 管理异步请求：取消上一个请求的最佳实践

tech_zjf
431 阅读3分钟

在做网页开发时，处理异步请求是常见的事情。比如说，当用户在界面上快速切换不同的选项卡或按钮时，可能需要根据他们的选择去请求一些数据。如果用户点击得太快，就会发出多个请求，这不仅浪费了带宽，还可能导致数据更新错乱，因为后面的请求结果可能会覆盖之前的结果。

为了避免这个问题，我们可以使用 Axios 这个库，它提供了一种很方便的方式来管理请求，并且可以取消之前的请求。下面，我就来给大家介绍一下具体怎么做。

实现最终效果 Rczm0GCepY.gif

实现: axios提供了两种取消请求的了方法：

  1. AbortController
  2. CancelToken

我这块就使用的是 CancelToken，然后交互的逻辑就是我每点击一个tab 然后会拿他的id然后去请求接口获取一段文本展示下面的输入框，问题就是点击过快然后网络较慢的时候就会出现先发出去的请求响应的还慢,就会覆盖后响应的请求。所以我们只需要每次请求的时候取消上一次的请求就行，所以我们可以用一个变量记录上一个请求就行。

// 假设这是你的 API 服务 
async fetchTemplateInfoByTemplateId(id: number, cancel?: (c: axios.Canceler) => void): Promise<ShownotesTemplateInfo> {
     const { data } = await this.axios.get(`/note/${id}`, {
         cancelToken: new CancelToken(function (c) {
            if (cancel) {
                   cancel(c);
            }
         }),
     });
     return data;
}


// 定义一个变量记录上一个请求
const prevFetch = useRef<axios.Canceler | null>(null);


// tab改变的时候发送请求去获取数据
const fetchTemplateCategoryInfo = async (id: number) => {
    try {
        if (prevFetch.current) {
            prevFetch.current();
        }
        const res = await $api.shownotes.fetchTemplateInfoByTemplateId(id, (cancal) => {
            prevFetch.current = cancal;
        });
        setActiveTemplate(res?.template || '');
   } catch (error) {
        if (axios.isCancel(error)) {
           console.log('请求已取消', error.message);
        } else {
           console.error('请求失败', error);
        }
   }
};

代码解析

  1. 使用 Axios 和 CancelToken：
    这里我们在每个请求中创建一个 CancelToken。这样在发起请求的时候，可以传递一个取消函数，这样用户如果再次请求，就可以取消之前的请求。
  2. 用 useRef 保存取消函数：
    我们使用 useRef 来创建一个引用 prevFetch，用来保存上一个请求的取消函数。在每次请求之前，先检查一下 prevFetch.current 是否存在，如果存在，就调用它来取消之前的请求。
  3. 处理错误：
    在处理请求结果的时候，我们要检查一下错误是否是因为请求被取消。如果是，就可以记录一下日志，而不需要处理其他类型的错误。

总结

通过使用 Axios 的取消功能，我们可以有效地管理异步请求，确保在用户快速切换选项时，只处理最新的请求结果。这不仅提升了用户的体验，避免了状态更新的混乱。【但其实前端的取消请求没多大意义，后端在接收到请求后已经开始处理（如查询数据库、执行计算等），那么这个处理过程不会因为前端的取消而自动停止】

希望这篇文章能帮助你更好地理解如何在 React 中使用 Axios 来处理请求。如果你有任何问题或者想讨论更多，欢迎在评论区留言！

avatar
文章
阅读
粉丝