【js】json-fetch小知识

假定后端接口地址http://localhost:8080/userdata,返回数据为

{name: 'Tom', age: 25}

前端在使用fetch获取数据时,会得到一个Response响应体

// 调用接口
fetch('http://localhost:8080/userdata')
  .then(data => console.log('data: ', data))
  .catch(err => console.log('err: ', err))

结果
在这里插入图片描述
如果想得到响应数据{name: 'Tom', age: 25} 需要加上.json()方法处理

fetch('http://localhost:8080/userdata')
	.then(res=>res.json())
	.then(data => console.log('data: ', data))
	.catch(err => console.log('err: ', err))

请求结果:
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很高兴听到您对Spring Boot和Vue开发知识中心的代码感兴趣!以下是一个简单的示例代码,用于演示如何使用Spring Boot和Vue.js开发一个基本的知识中心应用程序。 后端(Spring Boot)代码示例: ```java // KnowledgeController.java @RestController @RequestMapping("/api/knowledge") public class KnowledgeController { @Autowired private KnowledgeService knowledgeService; @GetMapping public List<Knowledge> getAllKnowledge() { return knowledgeService.getAllKnowledge(); } // 其他路由和方法根据需求进行定义 } // KnowledgeService.java @Service public class KnowledgeService { @Autowired private KnowledgeRepository knowledgeRepository; public List<Knowledge> getAllKnowledge() { return knowledgeRepository.findAll(); } // 其他业务逻辑方法根据需求进行定义 } // KnowledgeRepository.java public interface KnowledgeRepository extends JpaRepository<Knowledge, Long> { // 自定义查询方法根据需求进行定义 } // Knowledge.java @Entity public class Knowledge { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String title; private String description; // 其他属性和对应的getter/setter方法根据需求进行定义 } ``` 前端(Vue.js)代码示例: ```html <!-- KnowledgeCenter.vue --> <template> <div> <h1>Knowledge Center</h1> <ul> <li v-for="knowledge in knowledgeList" :key="knowledge.id"> <h2>{{ knowledge.title }}</h2> <p>{{ knowledge.description }}</p> </li> </ul> </div> </template> <script> export default { data() { return { knowledgeList: [] }; }, mounted() { this.fetchKnowledge(); }, methods: { fetchKnowledge() { // 调用后端API获取知识列表数据 fetch('/api/knowledge') .then(response => response.json()) .then(data => { this.knowledgeList = data; }) .catch(error => { console.error('Error:', error); }); } } }; </script> ``` 这只是一个简单的示例代码,用于演示Spring Boot和Vue.js的集成。您可以根据自己的需求进行扩展和修改。希望对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值