前端面试:axios 是否可以取消请求?

在实际工作中,取消请求的场景通常出现在以下几种情况中:

  1. 用户导航离开页面:如果用户在请求数据的过程中快速切换到另一个页面,可以通过取消未完成的请求来优化性能。
  2. 输入框的搜索提示:当用户在输入框中输入内容时,可以结合防抖的方式取消之前的请求,从而只保留最新的请求,避免发送过多的请求。

取消请求的实现方式

Axios 提供了 CancelToken 的功能来实现请求的取消。以下是具体的代码示例:

复制代码
import axios from 'axios';  

// 创建一个取消源  
const CancelToken = axios.CancelToken;  
let cancel;  

// 发送请求时可以传入 cancel token  
axios.get('/api/data', {  
  cancelToken: new CancelToken(function executor(c) {  
    // 这里可以保存对 cancel 的引用  
    cancel = c;  
  })  
}).then(response => {  
  console.log(response.data);  
}).catch(error => {  
  if (axios.isCancel(error)) {  
    console.log('请求已被取消', error.message);  
  } else {  
    // 处理其他错误  
    console.error('请求出错', error);  
  }  
});  

// 需要取消请求时调用 cancel  
cancel('请求被用户取消');  

注意:

  1. 仅在需要取消请求的情况下调用 cancel 函数。
  2. 取消请求的异常会被 catch 捕获,通过 axios.isCancel 来判断是否是取消的原因。
  3. 记得根据实际需求合理使用取消请求的功能,以避免不必要的请求和资源浪费
相关推荐
李鸿耀18 小时前
主题换肤指南:设计到开发的完整实践
前端
带娃的IT创业者1 天前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost1 天前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11061 天前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白1 天前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学1 天前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽1 天前
【初学】调试 MCP Server
前端·mcp
四月_h1 天前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate1 天前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
行者..................1 天前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js