axios 或 fetch 如何实现对发出的请求的终止?

终止 HTTP 请求是一个重要的功能,特别是在需要优化性能、避免不必要的请求或在某些事件发生时(例如用户点击取消)中断正在进行的请求时。以下是如何使用 axiosfetch 实现请求终止的方法:

1. axios

axios 使用了 CancelToken 来支持取消请求。

以下是使用 axios 取消请求的例子:

javascript 复制代码
const axios = require('axios');

// 创建一个 CancelToken 的源
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('https://api.example.com/data', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理其他错误
  }
});

// 在需要时取消请求
source.cancel('Operation canceled by the user.');

2. fetch

对于原生的 fetch API,你可以使用 AbortControllersignal 属性来取消请求。

以下是使用 fetch 取消请求的示例:

javascript 复制代码
const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error: ', err);
    }
  });

// 在需要时取消请求
controller.abort();

这里,AbortController 和它的 signalfetch 请求相关联。当调用 controller.abort() 时,与该 signal 关联的 fetch 请求将被中断。

总的来说,不论是使用 axios 还是 fetch,都提供了取消正在进行的 HTTP 请求的能力。这在某些场景下(例如页面卸载或用户取消操作时)能够避免不必要的后续操作或错误处理。

相关推荐
RaidenLiu20 分钟前
告别繁琐:用 Signals 优雅处理 Flutter 异步状态
前端·flutter·前端框架
星链引擎23 分钟前
面向API开发者的智能聊天机器人解析
前端
前端Hardy24 分钟前
HTML&CSS&JS:纯前端图片打码神器:自定义强度 + 区域缩放,无需安装
前端·javascript·css
道可到30 分钟前
35 岁程序员的绝地求生计划:你准备好了吗?
前端·后端·面试
道可到40 分钟前
国内最难入职的 IT 公司排行:你敢挑战哪一家?
前端·后端·面试
jnpfsoft41 分钟前
低代码应用菜单避坑指南:新建 / 删除 / 导入全流程,路由重复再也不怕!
前端·低代码
Keepreal49641 分钟前
word文件预览实现
前端·javascript·react.js
郝开42 分钟前
5. React中的组件:组件是什么;React定义组件
前端·javascript·react.js
我是天龙_绍42 分钟前
uniapp 中的 #ifndef 条件编译
前端
斜向生42 分钟前
【JavaScript正则表达式指南】——字符类(集合、范围、预定义字符类)和反向字符类详解
javascript