打印后端传进来的数据时返回数据是Promise对象

最新推荐文章于 2025-04-24 21:52:57 发布

原创最新推荐文章于 2025-04-24 21:52:57 发布 · 2.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

实习日记专栏收录该内容

15 篇文章

订阅专栏

本文针对在前后端数据交互中常见的Promise{<pending>}

前言

最近跟后端传数据，常常打印数据以测试是否获取到数据，但是常遇到返回的数据是Promise{<pending>}格式的

正文

问题出在没有用异步函数获取！！！要再函数前加上async和await。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Olliverzhang

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

学习AJAX必知必会（4）~JQuery发送Ajax请求、ajax使用fetch函数（返回值是Promise对象）

pythonxxoo的博客

01-23

315

Python微信订餐小程序课程视频 https://edu.youkuaiyun.com/course/detail/36074 Python实战量化交易理财系统 https://edu.youkuaiyun.com/course/detail/35475 一、JQuery发送Ajax请求 ■ 对于get和post请求，jQuery内部封装了Ajax请求的4个步骤和数据格式的设置 ■ 对于Ajax通用请求，jQuery内部封装了Ajax请求的4个步骤和数据格式设置、超时设置、请求失败设置（1）jquery-server的get请

前端数据结构

qq_45772348的博客

08-11

751

前端数据结构数据结构1.概念2.数据3.数组4.链表5.栈6.队列7.哈希表8.树9.二叉搜索树数据结构 1.概念作用：阐述关系结构：简单的理解就是关系，不同的数据元素之间不是独立的，而是存在特定的关系逻辑结构：指数据对象中数据元素之间的相互关系分类：集合结构、线性结构、树形结构、图形结构集合结构：数据元素属于同一个集合，他们之间没有其他的关系，他们的共同树形是：“同属于一个集合。” 线性结构：最典型的数据关系是一对一是一种有序数据的集合除第一个和最后一个数据元素之外，其他数据元素都

3 条评论您还未登录，请先登录后发表或查看评论

13.Promise 对象

awkticu3808的博客

01-16

519

Promise 对象Promise 对象Promise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对...

打印接口数据，结果返回了Promise{＜pending＞}

m0_61829034的博客

01-23

1138

用异步函数获取接口数据，在函数前加上async和await即可。

后端接口返回的是promise，怎么取出数据？

weixin_58689699的博客

01-30

1022

用async 和await，并且用另一个数组去接受。

promise 请求返回对象_promise-async/await-axios

weixin_30015371的博客

12-29

1783

Promise对象代表了未来某个将要发生的事件（通常是一个异步操作），是ES6原生提供的。在ES6以前实现异步操作主要是依靠回调函数，由于ajax请求时无法得知数据返回的具体时间，所以只能将callback回调传给ajax，待ajax请求完成时再执行回调函数。而promise接受一个函数做参数，该函数有 resolve方法和reject方法两个参数，若异步操作...

小程序中的数据绑定与状态管理：企业官网实现细节，掌握数据与状态的控制艺术

本论文系统地介绍了小程序的数据绑定与状态管理基础、机制解析、实践应用、高级技巧，以及优化维护和未来趋势。首先，我们讨论了数据绑定在小程序开发中的重要性，以及状态管理机制对于解决组件间通信和维护应用状态...

数据绑定原理揭秘：3步搞懂Vue2响应式系统如何自动更新视图

Vue2的响应式系统基于数据劫持与依赖追踪机制，通过Object.defineProperty实现对数据读写操作的拦截，结合Watcher与Dep构建精准的依赖关系网。本文系统阐述了响应式系统的核心设计思想，深入剖析了从数据劫持、依赖...

Cesium动态Polyline高效上手指南：打造个性化样式与数据绑定

Cesium动态Polyline技术允许开发者在三维地球仪上创建和管理动态线条，实现数据可视化和交互式分析。本文旨在全面介绍Cesium动态Polyline的基础和高级应用，包括初始化、样式定制、性能优化以及与外部数据源的集成。...

NestJS——使用TypeORM操作数据库、增删改查、关联查询、QueryBuilder

HuoZhiyan 的博客

04-24

1482

本篇文章我们学习如何使用TypeORM操作数据库，掌握TypeORM的基本用法。

最新详解Promise使用_promise获取数据

2401_84170391的博客

05-04

1266

console.log(“我执行了”) //不管是resolve 还是 reject都会执行。(img-31J30sYm-1714830919065)](img-wTqcJqTP-1714830919066)](img-HIJRWL4t-1714830919066)]console.log(‘res’,res) // js人柱力。console.log(“executor代码”)resolve(“我是新的值”)// reject(“你好”)resolve(“成功”)reject(“失败”)

promise到底如何返回值，记录小用法

henjuewang的博客

09-25

2万+

通过axios请求数据，将promise中的数据return出外层调用函数去：其实也就是await的各种用法。有人问如果不用await怎么办，那就使用回调函数呗

前端返回为Promise的情况解决

qq_24970227的博客

06-29

1705

前端p返回 promise 问题解决

接口返回Promise {＜pending＞}解决办法

十一侍卫的博客

03-19

1605

别怀疑，这个函数外面我加了async,只不过一开始没加await,没等他获取到我就输出了，当然是pending状态的Promise对象。把await加上去就行了。

函数的返回值是promise<pending>怎么解决？

funnyPython的博客

03-27

3万+

之前貌似很少写过promise, async, await相关的内容。我大概知道await使用的时候，函数必须外边有async. 我今天写函数的时候，写了一个函数，然后调用的时候，发现返回的是promise<pending>的状态。但是我在调用的函数里面打log, 是能打出来结果的，搜了很长时间才找到答案。最后也解决了。这里记录一下： var rs={score:0}; var g...

Spring 为何总是返回代理对象

chuanyangwang的专栏

10-10

335

protected Object wrapIfNecessary(Object bean, String beanName, Object cacheKey) { if (StringUtils.hasLength(beanName) && this.targetSourcedBeans.contains(beanName)) { return bean; } else if (Boolean.FALSE.equals(thi...

promise＜pending＞

wencun184的博客

03-03

1870

返回的是promise<pending>的状态第一种方式then接收 return new Promise((resolve, rejected) => { const images = uploadToOSS(files[0], "store"); console.log(images); \\Promise{<pending>} images .then(urls => { ...

ajax跳转controller后判断返回值_前端如何跟后端对接接口？分享这6种方式

weixin_39640221的博客

11-24

486

一般来讲，前端不会给后端接口，而是后端给前端接口的情况比较普遍。一些人可能不理解接口和前端开发的关系，其实不合适的接口设计会极大地影响用户的页面体验。那么今天就跟着千锋武汉Web前端培训小编一起来看看，前端如何调用后端接口？有哪几种方式？首先，要弄清楚前端提供一个接口或者调用后台接口，那么这个接口具体指什么？网上用户上传图片作为头像这个需求需要后台人员处理，当用户登录修改自己个人信息的时候，上传...

js中的promise详解

最新发布

09-17

<think> 我们在讨论HBuilderX中前端如何接收后端传来的数据。根据用户的问题，他正在使用uni-app开发（因为HBuilderX是uni-app的开发工具），所以我们需要关注uni-app中如何实现前端与后端的通信。通常，前端接收后端数据是通过网络请求实现的，比如使用uni.request方法（uni-app内置的API）来发送HTTP请求并处理响应。由于用户提到了HBuilderX，并且上一个引用中提到了uni-app打包过程，我们可以推测用户是在uni-app项目中工作。步骤： 1. 使用uni.request发送请求到后端API。 2. 在请求的成功回调中获取后端返回的数据。 3. 将数据更新到页面的data中，从而渲染到视图。注意：跨域问题在开发环境中可能会遇到，但uni-app在运行到浏览器时，可以使用HBuilderX内置的浏览器运行，这时可以通过配置manifest.json中的h5->devServer->proxy来解决跨域。而在小程序或App中，由于运行环境不同，跨域限制的表现也不同（例如小程序要求使用https且配置合法域名），App则没有浏览器的跨域限制。示例代码：在uni-app的页面中，可以在methods里定义一个方法，用于请求数据，然后在onLoad生命周期中调用。另外，根据引用[2]，提到了跨源请求的例子，我们在开发中可能会遇到跨域问题，需要后端配合解决或者在前端开发服务器配置代理（如上面提到的h5的proxy配置）。因此，我们将给出一个使用uni.request接收后端数据的示例，并提到跨域问题的处理。注意：用户的问题中没有指定具体的后端技术，所以我们只关注前端实现。 </think> 在HBuilderX中实现前端接收后端数据的方法主要依赖uni-app框架的网络请求API。以下是详细实现步骤和注意事项： ### 一、基础实现方法 1. **使用`uni.request`发起请求** ```javascript uni.request({ url: 'https://your-api-endpoint.com/data', // 后端API地址 method: 'GET', // 或 POST/PUT/DELETE success: (res) => { console.log('接收数据成功:', res.data); this.dataList = res.data; // 存储到页面数据 }, fail: (err) => { console.error('请求失败:', err); uni.showToast({ title: '数据加载失败', icon: 'none' }); } }); ``` 2. **绑定数据到页面（Vue语法）** ```html <view v-for="(item, index) in dataList" :key="index"> {{ item.name }} - {{ item.value }} </view> ``` ```javascript export default { data() { return { dataList: [] // 初始化空数组接收数据 } }, onLoad() { this.fetchData(); // 页面加载时获取数据 } } ``` ### 二、关键配置注意事项 1. **跨域问题处理（开发阶段）** - 在`manifest.json`中配置代理： ```json "h5": { "devServer": { "proxy": { "/api": { "target": "https://your-backend-domain.com", "changeOrigin": true, "pathRewrite": {"^/api" : ""} } } } } ``` - 生产环境需确保前后端同源或后端配置CORS 2. **安全设置（重要！）** - 在`manifest.json`中配置合法域名： ```json "app-plus": { "networkTimeout": 30000, "security": { "domainWhiteList": ["*.your-api-domain.com"] } } ``` ### 三、高级应用场景 1. **处理不同数据类型** ```javascript // 接收JSON数据 success: (res) => { const contentType = res.header['Content-Type']; if(contentType.includes('application/json')) { this.handleJSON(res.data); } // 其他数据类型处理... } ``` 2. **封装复用请求模块** ```javascript // utils/request.js export const http = (options) => { return new Promise((resolve, reject) => { uni.request({ ...options, success: resolve, fail: reject }) }) } // 页面调用 import { http } from '@/utils/request.js' http({ url: '/api/data' }).then(res => { ... }) ``` ### 四、调试技巧 1. 使用HBuilderX内置浏览器调试： - 按`Ctrl+Shift+I`打开调试器 - 在Network面板查看请求详情 2. 真机调试： - 手机开启USB调试模式 - 通过HBuilderX菜单「运行->运行到手机」 > **注意**：App端需注意[HTTPS强制要求](https://ask.dcloud.net.cn/article/67)，本地测试时可临时关闭验证： ```javascript // main.js uni.configMTLS({ protocols: ['TLSv1', 'TLSv1.1', 'TLSv1.2'] // 允许所有协议 }); ``` ### 五、优化建议 1. 添加加载状态提示 ```javascript uni.showLoading({ title: '加载中...' }); uni.request({ /* 配置 */ complete: () => uni.hideLoading() }); ``` 2. 数据缓存策略 ```javascript // 优先读取缓存 const cache = uni.getStorageSync('cachedData'); if(cache) this.dataList = cache; // 请求成功后更新缓存 uni.setStorageSync('cachedData', res.data); ``` 3. 异常统一处理 ```javascript // 封装拦截器 uni.addInterceptor('request', { fail: (err) => { uni.showModal({ content: `网络错误:${err.errMsg}` }); return Promise.reject(err); } }); ```