vue axios如何二次封装

Vue axios可以通过以下方式进行二次封装：1、创建一个新的axios实例，2、设置请求拦截器，3、设置响应拦截器，4、定义通用的请求方法。 下面将详细描述如何实现这些步骤。

一、创建一个新的axios实例

为了更好地管理和配置axios，我们可以创建一个新的axios实例。这样，我们可以为不同的axios实例设置不同的配置，方便管理和使用。

// src/utils/request.js
import axios from 'axios';
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 这里可以设置基础的URL
  timeout: 5000 // 请求超时时间
});
export default service;

二、设置请求拦截器

请求拦截器可以在请求发送之前对请求进行一些处理，比如在每个请求头中添加token信息。

// src/utils/request.js
// 添加请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = 'Bearer ' + token;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

三、设置响应拦截器

响应拦截器可以在服务器响应之后对响应数据进行处理，比如统一处理错误信息。

// src/utils/request.js
// 添加响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    const res = response.data;
    if (res.code !== 20000) {
      // 这里可以根据不同的状态码进行不同的处理
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // 处理token过期等情况
      }
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

四、定义通用的请求方法

为了更方便地使用axios，我们可以定义一些通用的请求方法，比如GET、POST等。

// src/utils/request.js
export function get(url, params) {
  return service({
    url: url,
    method: 'get',
    params: params
  });
}
export function post(url, data) {
  return service({
    url: url,
    method: 'post',
    data: data
  });
}
// 可以根据需要定义更多的请求方法

五、使用封装好的axios

在项目中使用封装好的axios实例，只需要引入我们封装好的方法即可。

// src/api/user.js
import { get, post } from '@/utils/request';
export function fetchUserList(params) {
  return get('/user/list', params);
}
export function createUser(data) {
  return post('/user/create', data);
}

实例说明

让我们来看看具体的使用示例和实例说明。

示例1：获取用户列表

// src/views/UserList.vue
import { fetchUserList } from '@/api/user';
export default {
  data() {
    return {
      userList: []
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    getUserList() {
      fetchUserList({ page: 1, pageSize: 10 }).then(response => {
        this.userList = response.data;
      }).catch(error => {
        console.error(error);
      });
    }
  }
};

示例2：创建新用户

// src/views/CreateUser.vue
import { createUser } from '@/api/user';
export default {
  data() {
    return {
      userForm: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    submitForm() {
      createUser(this.userForm).then(response => {
        this.$message.success('User created successfully');
      }).catch(error => {
        this.$message.error('Failed to create user');
        console.error(error);
      });
    }
  }
};

总结

通过以上步骤，我们可以更好地管理和使用axios，提高代码的可维护性和可读性。同时，通过封装axios，我们可以统一处理请求和响应，减少重复代码，提升开发效率。

建议

定期维护：定期检查和更新axios封装的代码，确保其能够适应项目的发展和变化。
错误处理：在实际项目中，可能会遇到各种各样的错误情况，建议在封装axios时，详细设计错误处理机制。
日志记录：在请求拦截器和响应拦截器中添加日志记录功能，有助于排查问题和调试。
文档编写：为封装好的axios方法编写详细的使用文档，方便团队成员了解和使用。

通过这些建议，可以进一步提升axios封装的质量和使用体验。