npm install axios

// src/api/api.js
 
import axios from 'axios';
 
const apiClient = axios.create({
  baseURL: 'https://api.example.com/', // API的基礎(chǔ)URL
  timeout: 10000, // 設(shè)置請(qǐng)求超時(shí)時(shí)間
  headers: {
    'Content-Type': 'application/json',
  },
});
 
// 請(qǐng)求攔截器：在發(fā)送請(qǐng)求之前做一些處理
apiClient.interceptors.request.use(
  (config) => {
    // 可以在這里設(shè)置token或其他請(qǐng)求頭
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
 
// 響應(yīng)攔截器：處理響應(yīng)數(shù)據(jù)，統(tǒng)一格式化響應(yīng)
apiClient.interceptors.response.use(
  (response) => {
    return response.data; // 返回響應(yīng)的data部分
  },
  (error) => {
    // 處理請(qǐng)求錯(cuò)誤
    console.error('API請(qǐng)求錯(cuò)誤', 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('未授權(quán)，請(qǐng)登錄');
          break;
        case 500:
          ElMessage.error('服務(wù)器錯(cuò)誤，請(qǐng)稍后再試');
          break;
        default:
          ElMessage.error('請(qǐng)求失敗，請(qǐng)稍后再試');
      }
    } else {
      ElMessage.error('網(wǎng)絡(luò)連接錯(cuò)誤');
    }
    return Promise.reject(error);
  }
);