巧用Axios中的cancelToken，斩断无用请求

在现代的前端开发中，axios作为一款备受推崇的HTTP客户端库，凭借着其易用性和丰富的特性，赢得了广大开发者的喜爱。而cancelToken，作为axios提供的强大功能，使我们能够灵活地控制HTTP请求，避免不必要的资源浪费。

剖析cancelToken

cancelToken本质上是一个信号，用于通知axios取消请求。当请求被取消时，axios会中止底层网络请求，释放相应的资源。其工作原理如下：

1. 创建一个cancelToken实例，通常在axios配置中进行：

const source = axios.CancelToken.source();

2. 将cancelToken传递给axios请求，作为配置项：

axios({
  method: 'get',
  url: '/api/data',
  cancelToken: source.token
});

3. 在需要取消请求时，调用cancelToken实例的cancel()方法：

source.cancel('请求已过期');

巧用场景

1. 路由跳转时取消请求

在单页应用中，当用户切换路由时，上一个页面的请求可能仍在进行中。使用cancelToken，我们可以及时取消这些不再需要的请求，避免浪费资源：

const source = axios.CancelToken.source();
router.beforeEach((to, from, next) => {
  source.cancel('路由切换');
  next();
});

2. 多个请求并发时取消冗余请求

当发起多个并发的请求时，可能会出现多个请求返回相同数据的情况。此时，我们可以使用cancelToken来取消较晚响应的请求：

const source1 = axios.CancelToken.source();
const source2 = axios.CancelToken.source();
axios.all([
  axios.get('/api/data1', { cancelToken: source1.token }),
  axios.get('/api/data2', { cancelToken: source2.token })
]).then((responses) => {
  source2.cancel('较晚响应的请求');
});

3. 超时请求的处理

利用cancelToken，我们可以设置请求超时时间。当请求超过指定时间仍未响应时，自动取消请求：

const source = axios.CancelToken.source();
const timeout = setTimeout(() => {
  source.cancel('请求超时');
}, 5000);
axios.get('/api/data', {
  cancelToken: source.token
});