vue对axios二次封装

Vue对axios进行二次封装可以提高开发效率和代码的可维护性。以下是一个简单的示例：

1. 创建一个api.js文件，用于封装所有与后端交互的API请求：

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://your-api-base-url.com', // 设置基础URL
  timeout: 5000, // 设置请求超时时间
});

// 添加请求拦截器
api.interceptors.request.use(
  (config) => {
    // 在发送请求之前做一些处理，例如添加token等
    // config.headers['Authorization'] = 'Bearer ' + token;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

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

export default api;

2. 在需要发送API请求的组件中引入api.js文件，并使用封装好的方法发送请求：

import api from './api.js';

export default {
  data() {
    return {
      todos: [],
    };
  },
  mounted() {
    this.fetchTodos();
  },
  methods: {
    fetchTodos() {
      api.get('/todos')
        .then((response) => {
          this.todos = response;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    createTodo() {
      api.post('/todos', { title: 'New Todo' })
        .then((response) => {
          // 处理创建成功后的逻辑
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};

通过封装后的api对象，我们可以在组件中直接调用get、post等方法发送请求，并且可以在拦截器中统一处理请求和响应的逻辑，提高代码的可维护性。