ReactJS - 从URL获取json对象数据

Question

如何从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.

Answer 1

尝试使用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/await

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.

Answer 2

编辑：使用 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 适用于所有现代浏览器。