ReactJS-从URL获取json对象数据

如何将URL中的数据获取到ReactJS中

url的类型如下：

如果在浏览器中键入，将显示json对象

如何将其加载到ReactJS

首先，我从以下几点开始：

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

console.log(dUrl);

但很明显，它显示的是url，而不是内容（我可以对其进行过滤——这只是将其加载到我不知道的对象中的第一步）

---

编辑：我不想使用jQuery。

编辑：使用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在所有现代浏览器中都可用。

好吧，你必须使用Ajax。 检查上面的链接。 尝试在组件生命周期方法之一期间进行调用。

---

这不使用JQuery。

请尝试使用FetchAPI，这是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);
  }
}

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

嗨，荒原（顺便说一句，这是有史以来最好的游戏-但这是另一篇文章：）

最简单的方法：

使用axios library://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
          });
       })
 }

范例

---

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

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

---

谢谢我忘了添加-我不想使用jQuery。我在谷歌搜索的大多数示例都提供了jquery的解决方案。我想要标准的JS。谢谢。两种方法我都试过，两种方法我都试过。我有一个问题。结果输出（对象）有什么不同。jquery方法输出（在控制台日志中）一个可以展开（到其元素中）的对象，以便在控制台中很好地组织它。纯JS解决方案显示一长串数据，但无法折叠/展开其元素。我假设jquery方法以一种更容易在以后处理的方式处理数据。在JS中我该怎么做呢？实际上两者没有区别。我认为控制台中的行为只是为jQuery添加了功能，否则您将从响应中获得相同的数据。jQuery的优点是易于使用。如果不想使用jQuery，请尝试获取>>。它只用于发出HTTP请求，而且也是轻量级的……向下投票，因为将jQuery添加回基于react的世界通常被认为是一个倒退。这不是一个典型的答案。考虑更新，以反映广泛认可的解决方案。正确的答案是好的。有正确的答案和消息来源更好。向上投票，因为这应该是被接受的答案，大多数时候它都会起作用。只是IE11不支持fetch。除非答案更新，否则应更改此问题的已接受答案