首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么我的fetch promise在prop中存储为空,而不是我正在获取的json?

问题描述: 为什么我的fetch promise在prop中存储为空,而不是我正在获取的json?

解答: 在前端开发中,使用fetch函数发送网络请求是一种常见的方式。fetch函数返回一个Promise对象,该对象表示异步操作的最终完成或失败,并且可以通过该对象获取到服务器返回的数据。

根据问题描述,你提到fetch promise在prop中存储为空,而不是获取到的json数据。这可能是因为在处理fetch返回的Promise对象时,没有正确处理异步操作的结果。

首先,确保你正确使用fetch函数发送网络请求,并且在fetch的then方法中处理异步操作的结果。例如:

代码语言:txt
复制
fetch(url)
  .then(response => response.json())
  .then(data => {
    // 在这里处理获取到的json数据
    // 将数据存储到prop中
  })
  .catch(error => {
    // 处理请求失败的情况
  });

在上述代码中,fetch函数发送网络请求,并通过then方法链式调用处理异步操作的结果。第一个then方法将服务器返回的响应对象转换为json格式的数据,然后在第二个then方法中处理获取到的json数据。

如果你的fetch promise在prop中存储为空,可能是因为没有正确处理异步操作的结果。请确保在第二个then方法中将获取到的json数据存储到prop中,例如:

代码语言:txt
复制
fetch(url)
  .then(response => response.json())
  .then(data => {
    // 将获取到的json数据存储到prop中
    this.props.setData(data);
  })
  .catch(error => {
    // 处理请求失败的情况
  });

上述代码中,通过调用this.props.setData方法将获取到的json数据存储到prop中。请根据你的具体情况,将数据存储到相应的prop中。

总结: 确保正确处理fetch返回的Promise对象,通过then方法处理异步操作的结果,并将获取到的数据存储到prop中。这样可以确保你能够获取到正确的json数据,并在应用中使用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript小技能:原型链运作机制、Promise

Promise是一个由异步函数返回可以向我们指示当前操作所处状态对象。基于 Promise API ,异步函数会启动操作并返回 Promise 对象。...JavaScript 通过原型链不是类来支持面向对象编程 JavaScript 常被描述一种基于原型语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型模板...2.1 Promise状态 Promise 有三种状态: 待定(pending):初始状态,这是调用 fetch() 返回 Promise状态,此时请求还在进行。...当一个 Promise 失败时,它 catch() 处理函数被调用。 基于 Promise API ,异步函数会启动操作并返回 Promise 对象。... Promise 数组任何一个被兑现时它就会被兑现,如果所有的 Promise 都被拒绝,它也会被拒绝。

92220

怎么防止同事用Evil.js代码投毒

,我们可以项目启动一开始,就备份一些重要函数,比如Promise,Array原型链方法,JSON.stringify、fetch、localstorage.getItem等方法, 然后需要时候...,运行检测函数, 判断Promise.prototype.then和我们备份是否相等,就可以甄别出原型链有没有被污染 ,真是一个小机灵首先我们要备份相关函数,由于我们需要检查不是很多,就不需要对window..._snapshots.fetch = fetch }})((0, eval)('this'))复制代码除了直接调用JSON,setTimeout,还有Promise,Array等原型链上方法,我们可以通过...getOwnPropertyNames获取后,备份到_protytypes里,比如Promise.prototype.then 存储结果就是// _protytypes{ 'Promise.then...上注册一个检测函数checkNative就可以啦,存储_snapshot和_prototype里内容,嘎嘎遍历出来,和当前运行时获取JSONPromise.prototype.then对比就可以啦

3K20

怎么防止同事用Evil.js代码投毒

,我们可以项目启动一开始,就备份一些重要函数,比如Promise,Array原型链方法,JSON.stringify、fetch、localstorage.getItem等方法, 然后需要时候...,运行检测函数, 判断Promise.prototype.then和我们备份是否相等,就可以甄别出原型链有没有被污染 ,真是一个小机灵首先我们要备份相关函数,由于我们需要检查不是很多,就不需要对window..._snapshots.fetch = fetch }})((0, eval)('this'))除了直接调用JSON,setTimeout,还有Promise,Array等原型链上方法,我们可以通过...getOwnPropertyNames获取后,备份到_protytypes里,比如Promise.prototype.then 存储结果就是// _protytypes{ 'Promise.then...上注册一个检测函数checkNative就可以啦,存储_snapshot和_prototype里内容,嘎嘎遍历出来,和当前运行时获取JSONPromise.prototype.then对比就可以啦

3.7K20

查漏补缺喽~JavaScript ES8-10新特性

在你示例,str.padEnd(10, '*')将返回"Hello*****",其中填充了5个星号使得字符串总长度10。 这些字符串填充方法处理字符串对齐、生成固定长度文本等场景下非常有用。...Promise.prototype.finally() fetch('https://api.example.com/data') .then(response => response.json()...Promise.prototype.catch()参数可以省略 fetch('https://api.example.com/data') .then(response => response.json...flat()方法可将多维数组展平一维数组,flatMap()方法展平数组同时还可以对每个元素执行映射操作。...console.error('模块加载失败:', error); }); 可选catch绑定 现在可以try-catch语句中省略catch块绑定,只使用catch {},不会将错误绑定到变量

20410

Vue 选手转 React 常犯 10 个错误,你犯过几个?

看下面这个例子: 可能你想当然他会在 items 数组时候显示 ShoppingList 组件。但实际上却显示了一个 0!...,如果你正在更新过去状态版本,这会导致无法使用新功能 需求变更:一些需要撤销/重做和显示历史记录值,没有突变情况下更容易执行,这是因为你可以将过去值保存在副本,并在适用情况下重做他们 更简单实现...总是将它们包装到代理,或者初始化时像许多“反应式”解决方案那样做其他工作。这也是为什么 react 允许您将任何对象置于状态(无论有多大)没有额外性能或正确性陷阱。...例如,这里是从服务器获取数据时创建唯一ID方法: async function retrieveData() { const res = await fetch('/api/data');...red', fontSize: '1.25rem' }}> 9、useEffect 异步方法 假设我们 useEffect 请求 API,从中获取一些服务端数据,通常需要将请求方法写成异步

20510

不只是离线缓存! - 论如何善用ServiceWorker

、修改【请求修改结果】;甚至可以将请求指向完全另一台服务器,返回不是此服务器应该返回内容【移花接木】;当然,SW也可以直接返回已经存储本地文件,甚至离线时候也能返回【离线访问可达性】。...由于SW安装后,页面需要刷新后才能交给SW所宰割,同时为了避免浏览器缓存影响,通常采用修改search方式强刷新,不是通过reload函数。...fetch只能传递Requset对象,Requset对象有两个参数(url,[option]),第一个参数是网址,第二个参数Request内容,例如body或header。...caches.match(req)将会试图CacheStorage匹配请求url获取值,然后丢给管道同步函数then,传参respCache匹配到值。...由于npmcdn对于latest缓存并不是持久有效,所以我们最好还是判断一下url版本是否以@latest结尾。

3.4K21

React服务器组件入门

Gatsby useStaticQuery hook 2019 年 2 月,Gatsby 引入了 useStaticQuery hook,虽然获取数据方法截然不同(不是试图将此与 RSC...(data, null, 2)}; }; export default ChildComponent; Gatsby ,你从未使用 GraphQL(一个普遍误解)获取数据;相反,你正在查询它...数据获取需要思考 然而,使用 RSC,你仍然需要考虑在哪些场景执行组件级数据获取有意义,不是路由级数据获取。...某些情况下,进行单个路由级请求并将结果数据通过道具传递给需要它组件可能仍然有意义,不是进行多个组件级数据请求。值得一提是,采用明智缓存策略可能会限制多个组件级数据请求影响。...许多情况下,它们可能不是正确选择,但这没关系。 正如每个开发人员在其职业生涯多次对任何给定方法所说那样,这取决于具体情况。

11510

强烈推介几个微信小程序开发小技巧,简单又实用

另外发现网上小程序文章大部分都是如何使用和如何避坑实用文,不是技巧文,这也从侧面反映了小程序坑多。...微信小程序原生开发过程不断发出这样疑问「为什么堂堂技术人才多如牛毛腾讯,会推出如此 laji」,很多弱智反人类地方,两三年前社区就已经提出来,官方回复已经反馈正在修复,但几年过去了,还是没有音信...3.1 为什么要使用 wx-updata 你使用 setData 时候,是不是有时候觉得很难受,举个简单例子: // 你 data data: { name: '蜡笔小新', info...这就是为什么在上线项目中使用 wx-updata,不是 setData wx-updata 原理其实很简单,举个例子: this.upData({ info: { height...小程序开发坑之-IOS时间显示NaN - 漠小飞 【微信小程序】性能优化 微信小程序使用Promise - 简书 开发微信小程序,为什么放弃 setData,使用 upData

1.4K30

为什么说Suspense是一种巨大突破?

为此,我们使用某种形式缓存来存储数据,每次渲染时,我们通过这个缓存来确定数据是否已经可用(然后它只是从变量读取它), 在这种情况下它会触发fetch,并抛出Promise结果来让React捕获。...样板代码→坏DX: 处理所有这些状态带来了许多样板代码:mount时候触发fetch,更新loading状态;并在成功时将数据存储state,或在失败时存储错误信息。...当然,我们也可以组件树更高一个层次来执行data fetching,不是组件触发它,但这并没有真正解决问题,它只是将其移动到其他地方。...所有这些provider基本上都存储了我们要求信息。每个请求,它首先检查信息是否已经存在了,如果是这样,直接return;如果没有,获取数据,并抛出Promise。...解析Promise之前,它将获取数据存储它用于缓存任何内容,这样当React触发重新渲染时,一切都复用。

1.6K30

Fetch还是Axios——哪个更适合HTTP请求?

除此之外,还将比较两种情况下以及错误处理中将数据转换为 JSON 格式过程。还将讨论 HTTP 拦截和下载进度。 开始吧!... .fetch() 方法,我们有一个强制性参数url,它返回一个 Promise,可以使用 Response 对象来解决。 .fetch() 方法第二个参数是选项,它是可选。... axios ,它是自动完成,所以我们只需在请求传递数据或从响应获取数据。它是自动字符串化,所以不需要其他操作。 让我们看看如何从 fetch() 和 axios 获取数据。...你可以看到,使用 axios 我们没有额外一行代码, .fetch()例子,我们必须将数据转换为 JSON 格式。...对于 .fetch() 方法,就比较复杂了。每次我们从 .fetch() 方法得到响应时,我们需要检查状态是否成功,因为即使不是,我们也会得到响应。

4.7K20

asyncawait初学者指南

如何创建JavaScript异步函数 让我们近距离看看fetchDataFromApi数据获取逻辑。JavaScript,数据获取是典型异步操作案例。...,getValue函数await关键字继续程序之前等待这个promise完成,所以我们能够将所需值打印到控制台。...Node还在其内置util模块添加了一个promise函数,可以将使用回调函数代码转换为返回promise从v10开始,Nodefs模块函数可以直接返回promise。...不是说我们应该对所有的事情都使用async/await(该语法确实有其缺点,我们将在讨论错误处理时看到),但我们应该意识到这是可能。...想象一下,我们正在构建一个CRUD应用程序,我们每个CRUD方法(创建、读取、更新、销毁)都有一个单独函数。

28020

【Node.js】 bodyparser实现原理解析

为什么我们需要body-parser 也许你第一次和bodyparser相遇是使用Koa框架时候。...等等,但根据Koa文档,ctx.body等同于ctx.res.body,所以从ctx.body取出来响应报文,不是请求报文实体哦 于是这时候又打算从Node文档里找找request对象有没有可以提供查询请求报文属性...) // 测试内容类型application/json和charset=gbk情况 fetch('/post', { method: 'POST', headers: {...'UTF-8' } 是彭湖湾,这句话采用UTF-8格式编码,content-typetext/plain 问题和后记 Q1.为什么要对charset进行处理 其实本质上来说,charset...前端一般都是固定为utf-8, 甚至JQueryAJAX请求,前端请求charset甚至是不可更改,只能是charset,但是使用fetch等API时候,的确是可以更改charset,这个工作尝试满足一些比较偏僻更改

1.6K20

一篇讲透自研前端错误监控

但通用fetch怎么办呢,fetch返回Promise,但Promise错误不能被捕获,怎么办呢?...Promise错误 普通Promise错误 try/catch不能捕获Promise错误 // try/catch 不能处理 JSON.parse 错误,因为它在 Promise try {...一般选择了存储方案后,设置好配置,存储方案就可以通过磁盘定时周期性获取数据。因此我们需要选择一款存储方案。...再继续对Node接收端处理,对接收到数据进行判,如果不进行日志打印,结果:依然无效。 所以开始定位是不是日志打印本身出了什么问题?...但马上就被当头一棒,发现高兴太早了。 团队某同学本地测试时候,由于玩很开心,一直去刷新页面去上报当前页面的错误。

1.6K20

带你提前理解 React 下一步:Concurrent Mode 与 Suspense

UI 可以显示 Loading 状态功能,那为什么这边要特別强调是 for Data Fetching 呢?...在这边需要先来了解一下官方所提出三种获取资料方式: Approach 1: Fetch-on-Render Approach 2: Fetch-Then-Render Approach 3: Render-as-You-Fetch...Render-as-You-Fetch (using Suspense) 这应该会是未来推荐做法, Render 之前尽早开始获取数据,并立刻开始 Render 下一个页面,这时资料若处于未 Ready...另外带來好处 — 解決 Race Condition 以前传统方式 componentDidMount 或是 useEffect 去抓资数据时候,Render 跟获取数据 Promise 本身是脱钩... Suspense for Data Fetching 情況下,这个获取数据 Promise 跟 Render 是挂钩一起,就不会有这个 Effect 没完成需要取消状况了。

94220

React Query 指南,目前火热状态管理库!

结果有三个主要对象: mutate:这是在你代码运行突变操作 isLoading:这个标志表示突变是否正在进行 error:这表示如果请求出现错误,则显示错误 React 应用程序中使用突变...使用 QueryClient,你可以使已经提供查询失效,并告诉 React Query 重新请求数据,因为你可以确保突变之后,那些数据还不是有效。...React Query 提供两个 hooks:useIsFetching 和 useIsMutation。 这些 hooks 可用于了解应用程序是否存在获取请求或突变请求正在进行。...现在使用 useSignUp hook,你可以获取 mutation 并调用 signUp 请求在你系统创建新用户。...null, } } getUser 函数很简单,它提供获取用户信息 HTTP 请求;如果用户,则返回 null,否则调用 HTTP 终点。

3.4K42

译|调整JavaScript抽象迭代方案

项目中编写该模块或复用该模块; 调整模块。随时调整模块; 移除模块。 先前文章,重心放在了第一点上。而在这篇文章将把重点放在第二点上。 模块更改是经常碰到一个难题。...之所以选择这个示例,是因为与外部 API 通信是开始项目时定义最基本抽象之一。这里想法是将所有与 API 相关配置和设置(如基本 URL,错误处理逻辑等)存储在这个模块....我们使用我们抽象出来 API模块,不是通过 window.fetch() 直接调用 Fetch API 。...我们开始讨论方法之前,我们先来总结一下什么是不变,什么是需要修改: 更改:公共 API.get() 方法 需要修改 axios() window.fetch()调用;需要再次返回一个 Promise...我们可以通过它来串起来,如果它值是 OK,那么一切将没什么问题(附注: Fetch API OK true 与 Axios statusText OK 是不一样

81890

async语法升级踩坑小记

期间遇到坑 将callback升级async/await其实并没有什么坑,反倒是generator + co 那里遇到了一些问题: 数组执行问题 co代码,大家应该都见到过这样:...因为async并不会判断你后边不是一个数组(这个是co中有额外处理)仅仅检查表达式是否一个Promise实例。...结合着前边提到async函数返回数据是一个类似Promise.resolve/Promise.reject过程。 await就是类似监听then动作。...Koa也并不是说你必须要升级到2.x才能够使用async函数。 Koa1.x推荐是generator函数,也就意味着其内部是调用了co来帮忙做转换。...,但是对于一些注释文档都很缺失项目来说,重构则是一件痛苦事情,因为你需要从代码获取逻辑,作为动态脚本语言JavaScript,其大型项目中可维护性并不是很高。

80110

沉淀了3年自研前端错误监控系统,打通你脉络

但通用fetch怎么办呢,fetch返回Promise,但Promise错误不能被捕获,怎么办呢?...「Promise错误」 普通Promise错误 try/catch不能捕获Promise错误 // try/catch 不能处理 JSON.parse 错误,因为它在 Promise try...最后一个问题,同样都是图片,上报时选用了1x1透明GIF,不是其他PNG/JEPG/BMP文件。 首先,1x1像素是最小合法图片。...一般选择了存储方案后,设置好配置,存储方案就可以通过磁盘定时周期性获取数据。因此我们需要选择一款存储方案。...再继续对Node接收端处理,对接收到数据进行判,如果不进行日志打印,结果:依然无效?。 所以开始定位是不是日志打印本身出了什么问题?

96710

沉淀了3年自研前端错误监控系统,打通你脉络

但通用fetch怎么办呢,fetch返回Promise,但Promise错误不能被捕获,怎么办呢?...「Promise错误」 普通Promise错误 try/catch不能捕获Promise错误 // try/catch 不能处理 JSON.parse 错误,因为它在 Promise try...最后一个问题,同样都是图片,上报时选用了1x1透明GIF,不是其他PNG/JEPG/BMP文件。 首先,1x1像素是最小合法图片。...一般选择了存储方案后,设置好配置,存储方案就可以通过磁盘定时周期性获取数据。因此我们需要选择一款存储方案。...再继续对Node接收端处理,对接收到数据进行判,如果不进行日志打印,结果:依然无效?。 所以开始定位是不是日志打印本身出了什么问题?

93820

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券