fetch('http://localhost:7001/home/query') .then(response => response.json()) .then(data => { const pieData = [ {name: 'stagesz', value: data.stagesz}, {name: 'stage', value: data.stage}, {name: 'suborder', value: data.suborder}, {name: 'announce', value: data.announce}, {name: 'zs', value: data.zs}, {name: 'mytyper', value: data.mytyper}, {name: 'mytypez', value: data.mytypez}, {name: 'cld', value: data.cld}, {name: 'clb', value: data.clb} ]; console.log(pieData); }) .catch(error => console.error(error));如何将数据给展示

时间: 2023-11-28 11:49:20 浏览: 125

vue fetch中的.then()的正确使用方法

在Vue.js应用中，`fetch` 是一种常用的用于获取远程数据的方法，它是现代浏览器支持的API，用于替代传统的`XMLHttpRequest`（XHR）进行异步请求。`fetch` 返回一个Promise，可以配合`.then()`方法处理响应。在本文中，我们将深入探讨在Vue中正确使用`fetch` 和 `.then()` 的方法。 `fetch` 方法的基本语法如下： ```javascript fetch(url, options) .then(response => response) .then(data => data) .catch(error => error); ``` 这里，`url` 是要请求的资源地址，`options` 是可选配置对象，通常包含请求方法（如 `GET` 或 `POST`）和其他设置。在给定的代码示例中，我们看到一个简单的 `fetch` 请求： ```javascript fetch('http://localhost:3000/books?id=123456', { method: 'get' }) .then(function (value1) { console.log(value1); return 'hello'; }) .then(function (value2) { console.log(value2); return 'HelloWorld'; }) .then(data => { console.log(data); }); ``` 在这个例子中，`fetch` 请求返回的 `response` 对象在第一个 `.then()` 中被打印出来，并返回了一个字符串 `'hello'`。第二个 `.then()` 接收并打印这个字符串 `'hello'`，然后返回 `'HelloWorld'`。最后一个 `.then()` 试图调用 `data.text()`，但此时 `data` 是 `'HelloWorld'` 字符串，而不是 `fetch` 响应，因此会抛出错误。正确的做法是确保每个 `.then()` 链都处理与响应相关的数据。假设后端返回的是JSON格式的数据，我们需要调用 `response.json()` 来解析响应体。以下是正确的示例： ```javascript fetch('http://localhost:3000/books?id=123456', { method: 'get' }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { console.log(data); // 在这里处理接收到的JSON数据 }) .catch(error => { console.error('There was an error:', error); }); ``` 在这个修正后的版本中，我们首先检查 `response.ok` 确保请求成功。如果请求失败，我们抛出一个错误并在 `.catch()` 中捕获。如果请求成功，我们调用 `response.json()` 解析JSON响应体，并在下一个 `.then()` 中处理解析后的数据。注意，`fetch` API 不会自动将响应体转换为JavaScript对象，需要手动调用 `.json()`、`.text()` 或其他方法。此外，由于 `fetch` 返回的Promise在HTTP错误状态时不会 reject，因此需要在 `.then()` 中检查 `response.ok`。 Vue中正确使用 `fetch` 和 `.then()` 的关键在于理解每个 `.then()` 都应处理上一个Promise返回的结果，并确保正确地处理 `fetch` 响应，包括检查状态、解析数据等。同时，使用 `.catch()` 处理可能出现的错误是必不可少的，以确保程序的健壮性。希望这篇文章能帮助你更好地理解和使用 Vue 中的 `fetch` 和 `.then()`。如果你有更多关于这方面的疑问，欢迎继续探索相关资料或查阅我们的其他文章。

这段代码是通过 API 获取数据并将数据存储在 `pieData` 数组中，如果你想要展示这些数据，可以考虑使用图表库（比如 Echarts、D3.js 等）来将这些数据可视化。以 Echarts 为例，你可以在 HTML 文件中添加一个 `div` 元素作为图表容器，然后在 JavaScript 文件中使用 Echarts 的 API 来创建饼图并将数据渲染到图表中。以下是一个简单的示例代码： HTML 文件： ```html <body> <div id="pie-chart" style="width: 400px; height: 400px;"></div> </body> ``` JavaScript 文件： ```javascript fetch('http://localhost:7001/home/query') .then(response => response.json()) .then(data => { const pieData = [ {name: 'stagesz', value: data.stagesz}, {name: 'stage', value: data.stage}, {name: 'suborder', value: data.suborder}, {name: 'announce', value: data.announce}, {name: 'zs', value: data.zs}, {name: 'mytyper', value: data.mytyper}, {name: 'mytypez', value: data.mytypez}, {name: 'cld', value: data.cld}, {name: 'clb', value: data.clb} ]; // 使用 Echarts 创建饼图 const chart = echarts.init(document.getElementById('pie-chart')); const option = { series: [{ type: 'pie', data: pieData }] }; chart.setOption(option); }) .catch(error => console.error(error)); ``` 这段代码将会在页面上创建一个饼图，并将 API 返回的数据展示在图表中。你可以根据自己的需要修改这段代码以适应不同的数据展示需求。

阅读全文

相关推荐

php中$_POST与php://input的区别实例分析

fetch-manifest-json:获取manifest.json

如何从http://localhost:7001/home/query接口中取值并赋值给var data

http://localhost:7001/home/query此接口返回的数据格式为{"stagesz":0,"stage":0,"suborder":0,"announce":0,"zs":10,"mytyper":2,"mytypez":8,"cld":10,"clb":0}，如何将数据赋值给

关于使用json传递数据给客户端的例子

pconnect:尝试使用 Slim 框架

Vue.js与后端API集成：JSON数据传输的权威指南

Data Migration Tips: How to Efficiently Store Data in MySQL Using Python

PHP数据库JSON返回与前端交互：无缝衔接的桥梁

MySQL数据库数据转JSON与TypeScript语言：珠联璧合，构建强类型数据转换方案

【Django GIS扩展新手必备】：快速上手django.contrib.gis.gdal.libgdal关键功能

JSON Server数据库在移动应用开发中的应用：数据管理最佳实践，助力移动应用数据管理

【文件上传与数据处理深度结合】：core.files.uploadedfile的实战技巧

【django.contrib.gis的空间查询实战】：从入门到精通的高级应用技巧

Vue.js SSR中的SEO优化策略

Express框架与Node.js的全栈应用入门

vue中json数据怎么存入mysql数据库 详细代码

Python FASTAPI 将SQLITE3中数据库 data表单的数据显示在html页面中，第一行显示列名，第二行开始显示内容，数据在页面上可以直接被修改，点击保存按钮，同步页面数据到数据库中

基于node.js的音乐网站

最新推荐

实验室设备管理系统 SSM毕业设计 附带论文.zip

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

"互动学习：行动中的多样性与论文攻读经历"

【数据传输高速公路】：总线系统的深度解析

如何结合PID算法调整PWM信号来优化电机速度控制？请提供实现这一过程的步骤和代码示例。

Vue.js开发利器：chrome-vue-devtools插件解析

vue中json数据怎么存入mysql数据库详细代码

实验室设备管理系统 SSM毕业设计附带论文.zip