Vue3解析Spring Boot ResponseEntity

在 Vue 3 中解析 Spring Boot 返回的 ResponseEntity 主要涉及处理 HTTP 响应。Spring Boot 的 ResponseEntity 通常包含状态码、响应头和响应体（JSON 数据为主）。以下是详细步骤和代码示例：

---

解决方案步骤：

1. 发送 HTTP 请求：使用 axios 或 fetch 调用 Spring Boot API

2. 处理响应：解析 JSON 响应体，获取状态码和头信息

3. 处理异常：捕获可能的网络错误或 API 错误状态码

4. 更新 Vue 状态：将解析后的数据绑定到 Vue 组件

---

完整示例代码

1. 安装依赖

bash

复制

下载

npm install axios

2. Vue 组件示例

vue

复制

下载

<template><div><button @click="fetchData">获取数据</button><div v-if="loading">加载中...</div><div v-if="error">{{ error }}</div><div v-if="data"><h3>响应数据：</h3><pre>{{ data }}</pre><p>状态码：{{ status }}</p></div></div>
</template><script>
import axios from 'axios';export default {data() {return {loading: false,error: null,data: null,status: null};},methods: {async fetchData() {this.loading = true;this.error = null;try {// 替换为你的 Spring Boot API 地址const response = await axios.get('http://localhost:8080/api/data', {headers: {// 如果需要认证// 'Authorization': 'Bearer your_token'}});// 解析 ResponseEntitythis.status = response.status; // HTTP 状态码this.data = response.data;    // 响应体（Spring Boot 返回的 body 部分）// 如果需要访问响应头const contentType = response.headers['content-type'];console.log('Content-Type:', contentType);} catch (err) {// 处理错误（网络错误或 4xx/5xx 响应）if (err.response) {// Spring Boot 返回的错误响应this.error = `错误 ${err.response.status}: ${err.response.data?.message || '未知错误'}`;} else {this.error = `网络错误: ${err.message}`;}} finally {this.loading = false;}}}
};
</script>

---

关键说明：

1. 响应结构：

   • response.data：Spring Boot 中 ResponseEntity 的 body 部分（通常是 JSON 对象）

   • response.status：HTTP 状态码（如 200、404 等）

   • response.headers：响应头（如 content-type）

2. Spring Boot 示例代码：

   java

   复制

   下载

   @RestController
   public class DataController {@GetMapping("/api/data")public ResponseEntity<Map<String, String>> getData() {Map<String, String> data = new HashMap<>();data.put("message", "操作成功");data.put("timestamp", Instant.now().toString());// 返回 ResponseEntity（包含状态码、头信息和数据）return ResponseEntity.ok().header("Custom-Header", "value").body(data);}
   }

3. 处理特殊场景：

   • 二进制文件：如果返回文件流，需设置 responseType: 'blob'

     js

     复制

     下载

     axios.get('/api/file', { responseType: 'blob' }).then(response => {const url = URL.createObjectURL(new Blob([response.data]));// 创建下载链接});

   • 自定义错误解析：

     js

     复制

     下载

     axios.interceptors.response.use(response => response,error => {const customError = error.response?.data?.error || "系统错误";return Promise.reject(customError);}
     );

---

常见问题排查：

1. 跨域问题 (CORS)：

   • 确保 Spring Boot 已配置 CORS：

     java

     复制

     下载

     @Configuration
     public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:5173") // Vue 开发服务器地址.allowedMethods("*");}
     }

2. 响应数据解析失败：

   • 检查响应头 Content-Type 是否为 application/json

   • 在 Spring Boot 中使用 @RestController 确保 JSON 序列化

3. 认证问题：

   • 在 axios 请求头中添加 Token：

     js

     复制

     下载

     axios.get('/api/secure', {headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
     })