ReactJS - 从 URL 获取 json 对象数据

Posted 2023-02-22

【中文标题】ReactJS - 从 URL 获取 json 对象数据

【英文标题】：ReactJS - get json object data from an URL

【发布时间】：2016-12-25 10:29:47

【问题描述】：

如何从 URL 获取数据到 ReactJS。

网址属于以下类型： http://www.domain.com/api/json/x/a/search.php?s=category

如果在浏览器中输入，将显示一个 json 对象。

如何将它加载到 ReactJS。

首先，我是这样开始的：

const dUrl = "http://www.the....";

console.log(dUrl);

但显然它显示的是 url 而不是内容（我将能够过滤 - 这只是将其加载到我不知道的对象中的初始步骤）

编辑：我宁愿不使用 jQuery。

【问题讨论】：

应更改此问题的已接受答案，除非答案已更新

【参考方案1】：

编辑：使用 fetch 进行 API 调用。

fetch(http://www.example.com/api/json/x/a/search.php?s=category)
  .then(response => response.json())
  .then((jsonData) => 
    // jsonData is parsed json object received from url
    console.log(jsonData)
  )
  .catch((error) => 
    // handle your errors here
    console.error(error)
  )

Fetch 在所有现代浏览器中都可用。

【讨论】：

谢谢。我忘了补充——我宁愿不使用 jQuery。我谷歌搜索的大多数示例都提供了 jquery 的解决方案。我想要一个标准的 JS。

谢谢。我已经尝试了这两种方法并且都有效。我有一个问题。结果输出（对象）有什么区别。 jquery 方法输出（在控制台日志中）一个可以展开（进入其元素）的对象，因此它在控制台中很好地组织。纯 JS 解决方案显示一长串数据，但无法折叠/展开其元素。我假设 jquery 方法以一种以后更容易处理的方式处理数据。我将如何在 JS 中做到这一点？

其实两者没有区别。我认为控制台中的行为只是为 jQuery 添加了功能，否则您将从响应中获得相同的数据。 jQuery 的好处是易于使用。如果您不想使用 jQuery，请尝试 fetch >> davidwalsh.name/fetch。它只是用于发出 HTTP 请求，而且它也很轻量级......

投反对票，因为将 jQuery 添加回基于反应的世界通常被认为是退步。这不是一个规范的答案。考虑更新以反映广泛认可的解决方案。

【参考方案2】：

在 React 16 或更高版本中，可以使用以下函数：

 yourFunctionName = async() => 
    const api_call = await fetch(`yourUrl`);
    const data = await api_call.json();
    console.log(data);
    

【参考方案3】：

嗨，Wasteland（有史以来最好的游戏，顺便说一句 - 但那是另一篇文章 :)

最简单的方法：

使用axios库：//cdnjs.cloudflare.com/ajax/libs/axios/0.8.1/axios.min.js

componentDidMount: function() 
    var th = this;
    this.serverRequest = 
      axios.get(this.props.source)
         .then(function(result)     
          th.setState(
            jobs: result.data.modules
          );
       )
 

示例 https://codepen.io/motekim/pen/RJPgRK

【参考方案4】：

尝试使用 Fetch API，这是 Facebook 推荐的。您应该避免将 jQuery 与 ReactJS 混合使用，并坚持使用 ReactJS 操作 DOM 的方式。

function getMoviesFromApiAsync() 
   return fetch('https://facebook.github.io/react-native/movies.json')
   .then((response) => response.json())
   .then((responseJson) => 
     return responseJson.movies;
   )
   .catch((error) => 
     console.error(error);
   );

或者使用异步/等待

async function getMoviesFromApi() 
  try 
    let response = await fetch('https://facebook.github.io/react-native/movies.json');
    let responseJson = await response.json();
    return responseJson.movies;
    catch(error) 
    console.error(error);
  

https://facebook.github.io/react-native/docs/network.html

我知道该 URL 用于 React Native 的文档，但这也适用于 ReactJS。

【讨论】：

有正确的答案很好。有正确的答案和来源会更好。

赞成，因为这应该是公认的答案

大部分时间它每次都会起作用。 caniuse.com/#feat=fetch 只是IE11不支持fetch。

【参考方案5】：

http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp

那么你将不得不使用 Ajax。 检查上面的链接。 尝试在组件生命周期方法之一期间进行调用。 这不使用 JQuery。