一文详解如何在Vue3中封装API请求

npm install axios

// src/api/api.js
 
import axios from 'axios';
 
const apiClient = axios.create({
  baseURL: 'https://api.example.com/', // API的基础URL
  timeout: 10000, // 设置请求超时时间
  headers: {
    'Content-Type': 'application/json',
  },
});
 
// 请求拦截器：在发送请求之前做一些处理
apiClient.interceptors.request.use(
  (config) => {
    // 可以在这里设置token或其他请求头
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
 
// 响应拦截器：处理响应数据，统一格式化响应
apiClient.interceptors.response.use(
  (response) => {
    return response.data; // 返回响应的data部分
  },
  (error) => {
    // 处理请求错误
    console.error('API请求错误', error);
    return Promise.reject(error);
  }
);
 
export default apiClient;

// src/api/user.js
import apiClient from './api';
 
// 获取用户信息
export const getUserInfo = () => {
  return apiClient.get('user/info');
};
 
// 更新用户信息
export const updateUserInfo = (data) => {
  return apiClient.put('user/update', data);
};

<template>
  <div>
    <h1>用户信息</h1>
    <div v-if="userInfo">
      <p>姓名: {{ userInfo.name }}</p>
      <p>邮箱: {{ userInfo.email }}</p>
    </div>
    <div v-else>
      <p>加载中...</p>
    </div>
  </div>
</template>
 
<script>
import { getUserInfo } from '@/api/user';
 
export default {
  data() {
    return {
      userInfo: null,
    };
  },
  async created() {
    try {
      const data = await getUserInfo();
      this.userInfo = data;
    } catch (error) {
      console.error('获取用户信息失败', error);
    }
  },
};
</script>

// src/api/api.js
 
import { ElMessage } from 'element-plus'; // 使用Element Plus的消息提示
 
apiClient.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    const response = error.response;
    if (response && response.status) {
      switch (response.status) {
        case 401:
          ElMessage.error('未授权，请登录');
          break;
        case 500:
          ElMessage.error('服务器错误，请稍后再试');
          break;
        default:
          ElMessage.error('请求失败，请稍后再试');
      }
    } else {
      ElMessage.error('网络连接错误');
    }
    return Promise.reject(error);
  }
);