封装优雅的[Axios]

1. 安装 Axios

如果你还没有安装 axios，可以通过以下命令安装：

bash 复制代码

bash
复制代码
npm install axios
# 或者 yarn add axios

2. 创建 Axios 封装模块

我们在项目中创建一个 request.js 文件，专门用来封装 Axios。

javascript 复制代码

// src/utils/request.js
import axios from 'axios';
import { ElMessage } from 'element-plus';  // 用于消息提示，如果你使用的是别的 UI 库，可以换成相应的消息提示组件

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API || 'https://your-api-url.com', // 基础 URL，来自环境变量或手动设置
  timeout: 5000,  // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
  }
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token');  // 从 localStorage 中获取 token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;  // 在请求头中携带 token
    }
    return config;
  },
  (error) => {
    // 请求错误时做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    const res = response.data;
    
    // 如果自定义状态码不等于 20000，则认为是错误
    if (res.code !== 20000 && res.code !== 200) {
      ElMessage.error(res.message || 'Error');
      
      // 如果需要处理特定的状态码，比如未登录
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        ElMessageBox.confirm(
          '你已经登出，是否重新登录？',
          '确认',
          {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning',
          }
        ).then(() => {
          // 此处可以做退出登录或者跳转登录页的操作
        });
      }
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;  // 正确的响应返回数据
    }
  },
  (error) => {
    console.log('err' + error);  // 打印错误信息
    ElMessage.error(error.message || '网络错误');
    return Promise.reject(error);
  }
);

export default service;

3. 封装常用请求方法

接下来我们可以进一步封装常用的 get、post 等方法，便于在项目中使用。

javascript 复制代码

javascript
复制代码
// src/api/index.js
import request from '@/utils/request';

// GET 请求
export function get(url, params = {}) {
  return request({
    url,
    method: 'get',
    params,
  });
}

// POST 请求
export function post(url, data = {}) {
  return request({
    url,
    method: 'post',
    data,
  });
}

// PUT 请求
export function put(url, data = {}) {
  return request({
    url,
    method: 'put',
    data,
  });
}

// DELETE 请求
export function del(url) {
  return request({
    url,
    method: 'delete',
  });
}

4. 在项目中使用

在 Vue 项目中使用这个封装好的 axios，你只需要引入对应的请求方法并调用即可：

javascript 复制代码

// 例如在某个组件中
import { get, post } from '@/api/index.js';

export default {
  name: 'MyComponent',
  data() {
    return {
      dataList: [],
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await get('/my-data-endpoint');
        this.dataList = response.data;
      } catch (error) {
        console.error('获取数据失败', error);
      }
    },

    async submitData() {
      try {
        const payload = { name: 'New Item' };
        const response = await post('/submit-data', payload);
        console.log('提交成功:', response);
      } catch (error) {
        console.error('提交失败', error);
      }
    },
  },
  mounted() {
    this.fetchData();
  }
};