前端利器：Vue 项目中封装通用 Axios 的独门秘诀

封装 Axios：提升 Vue 项目开发效率

一、封装 Axios 的必要性

直接使用 Axios 发起请求时，需要编写大量重复性代码，且错误处理和请求类型支持存在局限性。封装 Axios 可以简化请求代码 ，统一错误处理 ，并增强灵活性 。

二、封装 Axios 的步骤

1. 安装 Axios 库

npm install axios

2. 创建 Axios 实例

import axios from 'axios';

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

3. 封装请求方法

export const get = (url, params) => {
  return instance.get(url, { params });
};

export const post = (url, data) => {
  return instance.post(url, data);
};

4. 使用封装后的请求方法

import { get } from '@/utils/axios';

export default {
  methods: {
    async fetchUserData() {
      const res = await get('/user/info');
      this.userData = res.data;
    },
  },
};

三、封装 Axios 的注意事项

1. 处理请求错误

instance.interceptors.response.use(
  res => res,
  err => {
    // 处理错误并提供友好的提示
  }
);

2. 设置超时时间

const instance = axios.create({
  timeout: 10000,
  ...
});

3. 使用拦截器

// 请求前拦截器
instance.interceptors.request.use(
  config => {
    // 统一添加请求头等
    return config;
  },
  err => {
    // 处理错误
  }
);

四、案例分享

1. 封装简单的登录接口

export const login = (username, password) => {
  return instance.post('/login', { username, password });
};

2. 封装通用的分页查询接口

export const paginate = (url, params) => {
  return instance.get(url, { params });
};

五、常见问题解答

1. 为什么需要封装 Axios？

封装 Axios 可以简化请求代码，统一错误处理，并增强请求类型的灵活性。

2. 如何处理请求错误？

可以使用 Axios 的 catch 方法或拦截器来处理请求错误，并提供友好的错误提示。

3. 如何设置超时时间？

在创建 Axios 实例时，可以通过设置 timeout 属性来设置超时时间。

4. 如何使用拦截器？

拦截器可以在请求发送前或响应返回后对请求或响应数据进行处理，从而实现统一添加请求头、处理响应数据等功能。

5. 如何封装通用的分页查询接口？

可以创建一个 paginate 方法，接收分页参数，并使用 Axios 的 get 方法发起请求，返回响应数据。