axios的封装-让你的axios请求更优雅

随着前端开发的深入，我们常常需要在项目中进行大量的数据请求，这不仅影响了开发的效率，也使代码变得杂乱无章，为了解决这一问题，我们就需要对axios进行封装，以实现代码的统一管理和高效运行。

第一步：引入axios
首先，我们需要在项目中引入axios库，可以使用npm或yarn安装：

npm install axios

第二步:创建axios实例并设置请求头
接下来，我们可以创建一个axios实例，并对请求头进行设置，以实现全局配置：

import axios from 'axios';

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

第三步：request拦截器
我们可以使用request拦截器来处理请求，在发出请求之前对请求数据进行处理，例如添加token或其他认证信息：

instance.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

第四步：设置response拦截器
同样，我们可以使用response拦截器来处理响应，在收到响应后对数据进行处理，例如提取数据或处理错误信息：

instance.interceptors.response.use((response) => {
  return response.data;
}, (error) => {
  // 处理错误
});

第五步：暴露出去 在组件中使用
最后，我们可以将封装好的axios实例暴露出去，以便在组件中使用：

export default instance;

在组件中，我们可以使用封装好的axios实例发送请求：

import axios from '../axios';

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

发送一个新的请求之前，取消前面的所有正在进行的请求

import axios from 'axios';

const instance = axios.create();

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

// 发送请求，并传递取消令牌
instance.get('/api/users', {
  cancelToken: source.token,
}).then((response) => {
  console.log(response.data);
}).catch((error) => {
  if (axios.isCancel(error)) {
    console.log('Request canceled');
  } else {
    console.log(error.message);
  }
});

// 取消请求
source.cancel('Request canceled');

通过以上步骤，我们就可以轻松地将axios进行封装，从而在项目中进行数据请求时，更加便捷和高效。