从 URL 获取 React-Native JSON

Posted 2023-02-22

【中文标题】从 URL 获取 React-Native JSON

【英文标题】：React-Native JSON fetch from URL

【发布时间】：2019-01-07 12:37:06

【问题描述】：

我希望我能找到一些帮助解决这个问题。

我正在使用 React Native 并尝试从名为 Feiertage-API (https://feiertage-api.de/) 的 API 获取一些数据，该 API 基本上返回（应该返回）德国的法定假日。

尝试在 react native 中使用 fetch，返回：

Response 
   "_bodyBlob": Blob 
     "_data": Object 
       "blobId": "49C4AD4B-4648-44DB-AED7-7654EB78EF7A",
       "name": "api",
       "offset": 0,
       "size": 487,
       "type": "application/json",
     ,
   ,
   "_bodyInit": Blob 
     "_data": Object 
       "blobId": "49C4AD4B-4648-44DB-AED7-7654EB78EF7A",
       "name": "api",
       "offset": 0,
       "size": 487,
       "type": "application/json",
     ,
   ,
   "headers": Headers 
     "map": Object 
       "access-control-allow-origin": Array [
         "*",
       ],
       "content-type": Array [
         "application/json",
       ],
       "date": Array [
         "Tue, 31 Jul 2018 07:17:51 GMT",
       ],
       "server": Array [
         "nginx",
       ],
       "x-powered-by": Array [
         "php/7.0.31, PleskLin, PleskLin",
       ],
     ,
   ,
   "ok": true,
   "status": 200,
   "statusText": undefined,
   "type": "default",
   "url": "https://feiertage-api.de/api/?jahr=2019&nur_land=hb",

我的 fetch 调用如下所示：

fetch('https://feiertage-api.de/api/?jahr=2019&nur_land=hb')
                .then(response => console.log(response) )
                .catch(error => console.log(error));

GET-参数为： - jahr=2019（对于年份，我认为这很明显） - nur_land=hb（以简写形式指定什么状态）

可以通过添加 get-parameter 'callback=mycallbackname' 来获取 JSONP

如果尝试显示数据： console.log(response.json())

结果是：

 Promise 
      "_40": 0,
      "_55": null,
      "_65": 0,
      "_72": null,
   

我期望看到的正是这里显示的数据 -> https://feiertage-api.de/api/?jahr=2019&nur_land=hb

想知道如何从 Response.... 中提取数据。

【参考方案1】：

您需要对该响应调用 .json() 方法。

fetch('https://feiertage-api.de/api/?jahr=2019&nur_land=hb')
            .then(response => response.json() )
            .then(data => console.log(data) )
            .catch(error => console.log(error));

【讨论】：

这到底是什么......我在另一个线程上看到了这个但没有成功。现在复制并粘贴您的解决方案，一切正常。非常感谢，将此标记为已接受的答案。

重要的是要注意response.json()返回一个promise，所以你要么必须等待它，要么将它包装在.then()中

所以它是异步的，第二个 .then 命令在第一个完成获取所有数据后被调用？对吗？

正确。 .catch() 只有在任何承诺失败时才会被调用。