如何优雅的取消接口请求

什么情况下需要取消接口

取消接口请求通常在以下情况下是有必要的:

1、组件卸载或页面切换:

当用户离开一个页面或者组件被销毁时,可能会存在之前发起的请求仍在进行中,这时候取消请求可以防止无效的请求结果导致的问题,如内存泄漏或不必要的资源消耗。

2、用户操作变更:

当用户在页面上执行了某些操作,导致之前发起的请求不再需要或者需要重新发起新的请求时,可以取消之前的请求以避免处理过时的数据。

3、网络条件变化:

在移动端或者网络不稳定的环境下,用户可能会频繁切换网络,这时候取消请求可以避免因网络切换导致的请求失败或者延迟过长的问题。

4、性能优化:

取消不必要的请求可以减轻服务器负担和网络流量,提高应用程序的性能和用户体验。

总的来说,取消接口请求可以提高应用的健壮性、性能和用户体验,特别是在大型单页应用或者需要频繁进行网络请求的场景下,更加需要注意和实现取消请求的功能。

如何取消接口请求

取消接口请求通常是在前端开发中涉及到异步请求的情况下需要考虑的问题。取消请求可以帮助减轻不必要的网络流量和资源消耗,提高应用程序的性能。在常见的前端框架(如React、Vue.js等)中,可以通过以下方式取消接口请求:

1、使用axios等HTTP库的取消功能

axios是一个流行的HTTP客户端库,它提供了取消请求的功能。你可以通过创建一个取消令牌(cancel token)来取消请求。当需要取消请求时,调用cancel方法即可。

js 复制代码
import axios from 'axios';

// 创建取消令牌
const source = axios.CancelToken.source();

// 发起请求
axios.get('/api/data', {
  cancelToken: source.token
}).then(response => {
  // 请求成功处理
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('请求已取消', error.message);
  } else {
    console.log('请求失败', error.message);
  }
});

// 取消请求
source.cancel('请求被取消了');

2、使用Fetch API的AbortController

Fetch API是JavaScript的原生API,AbortController提供了取消Fetch请求的功能。你可以创建一个AbortController实例,然后将其传递给fetch函数,通过调用abort方法取消请求。

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

fetch('/api/data', { signal })
  .then(response => {
    // 请求成功处理
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求已取消', error.message);
    } else {
      console.error('请求失败', error.message);
    }
  });

// 取消请求
controller.abort();

3、使用封装的request方法时候

通常情况下我们是把请求方法单独的封装到一个js里面,如下示例:

js 复制代码
// request.js
import axios from 'axios'
const CancelToken = axios.CancelToken
// 最新版本的axios已经弃用CancelToken,可以使用如下代替
// const controller = new AbortController();
export default (url, options) => {
   let CancelTokenSource = CancelToken.source()
   let config = {
     url: url,
     method: options.method,
     headers: {
        // ...
     },
     cancelToken: CancelTokenSource,
     // 最新版本的axios已经弃用CancelToken,可以使用如下代替,取消的时候调用controller.abort();
     // signal: controller.signal
   } 
   options.source = CancelTokenSource;
   axios.create().request(config).then(response => {

   })
}

调用封装的request方法

js 复制代码
import request from "./request.js";

let CancelTokenSource;
request('/api/data', {
   method: "GET", 
   source: CancelTokenSource,
   // ...
})

// 取消接口请求
if(CancelTokenSource) {
   CancelTokenSource.cancel("取消接口请求")
}

上面代码实际上是,在传参的options对象里面定义了一个 source 对象,在调用 axios 的时候把 CancelToken.source() 赋值给 options.source,这样在外部调用的时候也能够拿到axios的取消实例。

相关推荐
努力只为躺平2 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手4 分钟前
大保剑:Promise的有趣体验
javascript
李大玄4 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵5 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
蓝倾10 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove17 分钟前
常见 npm 报错问题
前端·npm
sunbyte17 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子18 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
知性的小mahua22 分钟前
vue3+canvas实现摄像头ROI区域标记
前端
嘗_38 分钟前
暑期前端训练day5
前端