如何隔离和提取常见的axios调用以防止代码重复？

在前端开发中，我们经常会使用axios库来进行网络请求。为了避免代码重复，我们可以将常见的axios调用进行隔离和提取，以便在不同的地方复用。

一种常见的做法是创建一个封装的axios实例，将一些通用的配置和拦截器应用于该实例。这样，在不同的地方只需要引入该实例，就可以直接使用封装好的axios调用，而无需重复编写相同的代码。

以下是一个示例的封装axios实例的代码：

// 封装axios实例
import axios from 'axios';

// 创建实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置基础URL
  timeout: 5000, // 设置超时时间
  headers: {
    'Content-Type': 'application/json' // 设置请求头
  }
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做一些处理，例如添加token等
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据进行处理，例如统一处理错误码等
    return response.data;
  },
  error => {
    // 响应错误处理
    return Promise.reject(error);
  }
);

export default instance;

在上述代码中，我们创建了一个名为instance的axios实例，并设置了一些通用的配置，例如基础URL、超时时间和请求头。同时，我们还添加了请求拦截器和响应拦截器，以便在请求和响应过程中进行一些处理。

接下来，我们可以在不同的地方引入该封装好的axios实例，并直接使用它进行网络请求，而无需再次配置和编写拦截器等代码。

// 使用封装的axios实例进行网络请求
import axiosInstance from './axiosInstance';

axiosInstance.get('/api/users')
  .then(response => {
    // 处理成功响应
  })
  .catch(error => {
    // 处理错误响应
  });

通过这种方式，我们可以有效地隔离和提取常见的axios调用，避免代码重复，提高开发效率。

对于axios的更多详细信息和用法，可以参考腾讯云的相关产品文档：axios。