vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3请求后端接口

Vue3请求后端接口实现方式

作者：Rysxt

本文详解Vue3中使用Fetch和Axios与后端交互的方法,涵盖请求发起、状态管理、错误处理及跨域等解决方案,推荐优先使用Axios,其拦截器、自动转换等特性提升开发效率,建议封装实例与API函数以统一配置

在Vue3应用中，与后端API交互是实现动态数据展示的核心环节。

本文将通过​​原生Fetch API​​和​​Axios库​​两种常用方式，详细讲解如何在Vue3组件中发起请求、处理响应、管理状态及解决常见问题，帮助你构建高效、可维护的前后端交互逻辑。

一、准备工作

在开始之前，请确保你的开发环境已安装以下工具：

创建一个新的Vue3项目：

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

选择“Vue 3”配置即可完成项目初始化。

二、使用原生Fetch API请求后端

Fetch API是现代浏览器内置的HTTP请求工具，无需额外安装依赖，适合简单的GET/POST请求。

1. 基础GET请求示例

在src/components目录下创建FetchExample.vue组件，代码如下：

<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>

2. POST请求示例（提交表单数据）

若需要向后台提交数据（如用户登录），可使用Fetch API的POST方法：

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);
    }
  }
}

3. 注意事项

三、使用Axios库请求后端

Axios是基于Promise的HTTP客户端，支持请求/响应拦截、自动JSON转换、取消请求等功能，更适合复杂项目。

1. 安装Axios

npm install axios

2. 封装Axios实例（推荐）

为统一管理请求配置（如baseURL、超时时间、拦截器），建议创建一个src/utils/request.js文件：

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;

3. 在组件中使用Axios

创建src/components/AxiosExample.vue组件：

<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>

4. 封装通用API函数（可选）

为提高代码复用性，可将不同接口封装为独立函数，存放在src/api/user.js中：

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;
  }
}

5. Axios的优势

四、常见问题解决

1. 跨域问题

若前端与后端不在同一域名/端口，需配置代理（以Vite为例）：

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前缀
      }
    }
  }
});

2. 响应数据格式处理

若后端返回的数据格式与拦截器预设不一致（如{ status: 200, data: {}, msg: '' }），需调整拦截器逻辑：

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

3. Token失效处理

在响应拦截器中判断token失效（如状态码401），并跳转至登录页：

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);
  }
);

五、总结

本文通过Fetch API和Axios两种方式，详细讲解了Vue3中请求后端接口的完整流程，包括基础请求、状态管理、错误处理及常见问题解决。​​

推荐优先使用Axios​​，其丰富的功能和良好的可维护性更适合复杂项目。在实际开发中，建议通过封装Axios实例和API函数，统一管理请求配置，提升团队协作效率。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文