前端vue如何封装axios

在Vue.js中，封装axios通常是为了简化HTTP请求操作，避免在每个组件中都重复导入和配置axios。你可以创建一个单独的文件，比如`axios.js`，然后导出一个封装好的axios实例。以下是一个简单的封装示例：

// axios.js
import axios from 'axios';
import { defineReactive } from 'vue';

// 创建axios实例并设置默认配置
const instance = axios.create({
  baseURL: process.env.BASE_API, // API基础地址
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
  },
});

instance.interceptors.request.use(
  (config) => {
    // 在发送请求前添加token等信息
    if (localStorage.getItem('token')) {
      config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

instance.interceptors.response.use(
  (response) => {
    const data = response.data; // 解析响应数据
    if (data.status === 'success') {
      return data.data;
    } else {
      throw new Error(data.message);
    }
  },
  (error) => {
    console.error('Error:', error);
    return Promise.reject(error);
  }
);

export default {
  install: function(Vue) {
    Vue.prototype.$axios = instance;
  },
};

然后在需要使用的地方，你只需要注入这个$axios属性就可以方便地发起请求了：

<script setup>
import { ref, onMounted } from 'vue';
import axios from '@/apis/axios'; // 引入封装的axios

let user = ref(null);

onMounted(async () => {
  try {
    const response = await axios.get('/api/users/me');
    user.value = response.data;
  } catch (error) {
    console.error(error);
  }
});
</script>