如何优雅的取消接口请求

什么情况下需要取消接口

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

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

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

2、用户操作变更：

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

3、网络条件变化：

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

4、性能优化：

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

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

如何取消接口请求

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

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

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

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方法取消请求。

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里面，如下示例：

// 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方法

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的取消实例。

原文链接：https://juejin.cn/post/7339830464000016419 作者：是阿派啊