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

<template>
  <div>
    <h1>用戶列表（Fetch API）</h1>
    <!-- 加載狀態(tài)提示 -->
    <div v-if="loading">加載中...</div>
    <!-- 錯(cuò)誤信息提示 -->
    <div v-if="errorMsg" style="color: red;">{{ errorMsg }}</div>
    <!-- 數(shù)據(jù)展示 -->
    <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: [],       // 存儲(chǔ)用戶數(shù)據(jù)
      loading: false,  // 加載狀態(tài)
      errorMsg: ''     // 錯(cuò)誤信息
    }
  },
  mounted() {
    this.fetchUsers(); // 組件掛載后自動(dòng)發(fā)起請(qǐng)求
  },
  methods: {
    async fetchUsers() {
      this.loading = true; // 開(kāi)啟加載狀態(tài)
      this.errorMsg = '';  // 清空錯(cuò)誤信息
      try {
        // 發(fā)起GET請(qǐng)求（使用JSONPlaceholder測(cè)試API）
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) { // 檢查響應(yīng)狀態(tài)（非200-299視為錯(cuò)誤）
          throw new Error(`網(wǎng)絡(luò)響應(yīng)異常：${response.status}`);
        }
        const data = await response.json(); // 解析JSON數(shù)據(jù)
        this.users = data; // 更新組件數(shù)據(jù)
      } catch (error) {
        this.errorMsg = `獲取數(shù)據(jù)失?。?{error.message}`; // 捕獲并顯示錯(cuò)誤
        console.error('Fetch請(qǐng)求錯(cuò)誤：', error);
      } finally {
        this.loading = false; // 關(guān)閉加載狀態(tài)
      }
    }
  }
}
</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' // 聲明請(qǐng)求體格式為JSON
        },
        body: JSON.stringify(userData) // 將JavaScript對(duì)象轉(zhuǎn)為JSON字符串
      });
      const result = await response.json();
      console.log('登錄成功：', result);
    } catch (error) {
      console.error('登錄失?。?, error);
    }
  }
}

npm install axios

import axios from 'axios';

// 創(chuàng)建Axios實(shí)例
const request = axios.create({
  baseURL: '/api', // 基礎(chǔ)路徑（可根據(jù)環(huán)境變量動(dòng)態(tài)設(shè)置）
  timeout: 5000    // 請(qǐng)求超時(shí)時(shí)間（毫秒）
});

// 請(qǐng)求攔截器：在發(fā)送請(qǐng)求前處理（如添加token）
request.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`; // 添加認(rèn)證頭
    }
    return config;
  },
  error => Promise.reject(error) // 攔截請(qǐng)求錯(cuò)誤
);

// 響應(yīng)攔截器：統(tǒng)一處理響應(yīng)（如判斷狀態(tài)碼）
request.interceptors.response.use(
  response => {
    // 假設(shè)后端返回格式為 { code: 0, data: {}, message: '' }
    if (response.data.code !== 0) {
      return Promise.reject(response.data.message); // 非0狀態(tài)碼視為錯(cuò)誤
    }
    return response.data.data; // 返回實(shí)際數(shù)據(jù)
  },
  error => {
    console.error('請(qǐng)求錯(cuò)誤：', error);
    return Promise.reject(error.message || '網(wǎng)絡(luò)異常'); // 統(tǒng)一錯(cuò)誤提示
  }
);

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實(shí)例

export default {
  data() {
    return {
      users: [],
      loading: false,
      errorMsg: ''
    }
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      this.loading = true;
      this.errorMsg = '';
      try {
        // 發(fā)起GET請(qǐng)求（自動(dòng)拼接baseURL：/api/users）
        const response = await request.get('/users');
        this.users = response; // 直接使用攔截器處理后的數(shù)據(jù)
      } catch (error) {
        this.errorMsg = `獲取數(shù)據(jù)失?。?{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開(kāi)頭的請(qǐng)求
        target: 'http://localhost:5000', // 后端服務(wù)器地址
        changeOrigin: true, // 改變請(qǐng)求頭中的origin為目標(biāo)URL
        rewrite: path => path.replace(/^\/api/, '') // 去除請(qǐng)求路徑中的/api前綴
      }
    }
  }
});

request.interceptors.response.use(
  response => {
    if (response.data.status !== 200) {
      return Promise.reject(response.data.msg);
    }
    return response.data.data; // 返回實(shí)際數(shù)據(jù)
  }
);

request.interceptors.response.use(
  response => response.data.data,
  error => {
    if (error.response && error.response.status === 401) {
      window.location.href = '/login'; // 跳轉(zhuǎn)登錄頁(yè)
    }
    return Promise.reject(error.message);
  }
);