Axios请求封装，打造开发效率新境界

前言

axios作为一款优秀的JavaScript库，在前端开发中可谓家喻户晓。它简化了浏览器与服务器之间的交互，让开发者能够轻松发送和接收数据。然而，随着项目规模的扩大和复杂度的增加，对axios请求进行封装的需求也日益凸显。

Axios请求封装

axios请求封装本质上是对axios实例的二次封装，目的是为了简化和统一请求逻辑，降低开发成本。我们可以通过axios.create()方法来创建axios实例，并对该实例进行一系列的配置和拦截。

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

上述代码创建了一个axios实例，并设置了基本配置，包括基础URL、超时时间和请求头。接下来，我们可以使用这个实例来发送请求。

instance.get('/users').then((response) => {
  console.log(response.data);
});

上面的代码发送了一个GET请求到/users端点，并打印了响应数据。

添加取消重复请求功能

在某些情况下，我们需要取消重复的请求，以避免浪费服务器资源和带宽。我们可以通过以下步骤来实现这个功能：

1. 在axios实例中创建一个名为cancelToken的属性，并将其初始化为axios.CancelToken.source()。

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
  cancelToken: axios.CancelToken.source(),
});

2. 在发送请求时，将cancelToken作为参数传递给请求方法。

instance.get('/users', {
  cancelToken: instance.cancelToken.token,
}).then((response) => {
  console.log(response.data);
});

3. 在需要取消请求时，调用cancelToken.cancel()方法。

instance.cancelToken.cancel();

这样，当我们调用cancelToken.cancel()方法时，所有正在进行的请求都会被取消。

总结

本文详细介绍了axios请求封装的步骤和方法，并添加了取消重复请求的功能。希望这些技巧能够帮助您提高开发效率，打造更加可靠和健壮的网络应用。