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 请求的能力。这在某些场景下(例如页面卸载或用户取消操作时)能够避免不必要的后续操作或错误处理。

相关推荐
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding7 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js