Vue3请求后端接口实现方式

vue create vue3-api-tutorial
cd vue3-api-tutorial

<template>
  <div>
    <h1>用户列表（Fetch API）</h1>
    <!-- 加载状态提示 -->
    <div v-if="loading">加载中...</div>
    <!-- 错误信息提示 -->
    <div v-if="errorMsg" style="color: red;">{{ errorMsg }}</div>
    <!-- 数据展示 -->
    <ul v-if="users.length && !loading">
      <li v-for="user in users" :key="user.id">{{ user.name }} ({{ user.email }})</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],       // 存储用户数据
      loading: false,  // 加载状态
      errorMsg: ''     // 错误信息
    }
  },
  mounted() {
    this.fetchUsers(); // 组件挂载后自动发起请求
  },
  methods: {
    async fetchUsers() {
      this.loading = true; // 开启加载状态
      this.errorMsg = '';  // 清空错误信息
      try {
        // 发起GET请求（使用JSONPlaceholder测试API）
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) { // 检查响应状态（非200-299视为错误）
          throw new Error(`网络响应异常：${response.status}`);
        }
        const data = await response.json(); // 解析JSON数据
        this.users = data; // 更新组件数据
      } catch (error) {
        this.errorMsg = `获取数据失败：${error.message}`; // 捕获并显示错误
        console.error('Fetch请求错误：', error);
      } finally {
        this.loading = false; // 关闭加载状态
      }
    }
  }
}
</script>

methods: {
  async loginUser() {
    const userData = { username: 'admin', password: '123456' };
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json' // 声明请求体格式为JSON
        },
        body: JSON.stringify(userData) // 将JavaScript对象转为JSON字符串
      });
      const result = await response.json();
      console.log('登录成功：', result);
    } catch (error) {
      console.error('登录失败：', error);
    }
  }
}

npm install axios

import axios from 'axios';

// 创建Axios实例
const request = axios.create({
  baseURL: '/api', // 基础路径（可根据环境变量动态设置）
  timeout: 5000    // 请求超时时间（毫秒）
});

// 请求拦截器：在发送请求前处理（如添加token）
request.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`; // 添加认证头
    }
    return config;
  },
  error => Promise.reject(error) // 拦截请求错误
);

// 响应拦截器：统一处理响应（如判断状态码）
request.interceptors.response.use(
  response => {
    // 假设后端返回格式为 { code: 0, data: {}, message: '' }
    if (response.data.code !== 0) {
      return Promise.reject(response.data.message); // 非0状态码视为错误
    }
    return response.data.data; // 返回实际数据
  },
  error => {
    console.error('请求错误：', error);
    return Promise.reject(error.message || '网络异常'); // 统一错误提示
  }
);

export default request;

<template>
  <div>
    <h1>用户列表（Axios）</h1>
    <div v-if="loading">加载中...</div>
    <div v-if="errorMsg" style="color: red;">{{ errorMsg }}</div>
    <ul v-if="users.length && !loading">
      <li v-for="user in users" :key="user.id">{{ user.name }} ({{ user.email }})</li>
    </ul>
  </div>
</template>

<script>
import request from '@/utils/request'; // 引入封装的Axios实例

export default {
  data() {
    return {
      users: [],
      loading: false,
      errorMsg: ''
    }
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      this.loading = true;
      this.errorMsg = '';
      try {
        // 发起GET请求（自动拼接baseURL：/api/users）
        const response = await request.get('/users');
        this.users = response; // 直接使用拦截器处理后的数据
      } catch (error) {
        this.errorMsg = `获取数据失败：${error}`;
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

import request from '@/utils/request';

// 登录接口
export function login(data) {
  return request.post('/user/login', data);
}

// 获取用户信息接口
export function getUserInfo() {
  return request.get('/user/info');
}

// 获取用户列表接口
export function getUserList() {
  return request.get('/users');
}

import { getUserList } from '@/api/user';

async fetchUsers() {
  this.loading = true;
  try {
    this.users = await getUserList();
  } catch (error) {
    this.errorMsg = error;
  } finally {
    this.loading = false;
  }
}

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': { // 匹配以/api开头的请求
        target: 'http://localhost:5000', // 后端服务器地址
        changeOrigin: true, // 改变请求头中的origin为目标URL
        rewrite: path => path.replace(/^\/api/, '') // 去除请求路径中的/api前缀
      }
    }
  }
});

request.interceptors.response.use(
  response => {
    if (response.data.status !== 200) {
      return Promise.reject(response.data.msg);
    }
    return response.data.data; // 返回实际数据
  }
);

request.interceptors.response.use(
  response => response.data.data,
  error => {
    if (error.response && error.response.status === 401) {
      window.location.href = '/login'; // 跳转登录页
    }
    return Promise.reject(error.message);
  }
);