ReactJS - 从 URL 获取 json 对象数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39019094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS - get json object data from an URL
提问by Wasteland
How do I get data from an URL into ReactJS.
如何从 URL 获取数据到 ReactJS。
The url is of the following type: http://www.domain.com/api/json/x/a/search.php?s=category
url 是以下类型：http: //www.domain.com/api/json/x/a/search.php?s=category
which, if typed in a browser, will display a json object.
如果在浏览器中输入，将显示一个 json 对象。
How do I load it to ReactJS.
我如何将它加载到 ReactJS。
To start with, I started by:
首先，我从：
const dUrl = "http://www.the....";
console.log(dUrl);
but obviously it displays the url not the content (which, I will be able to filter - it's just this initial step of loading it into an object that I don't know)
但显然它显示的是 url 而不是内容（我将能够过滤它 - 这只是将它加载到我不知道的对象中的第一步）
Edit: I'd rather not use jQuery.
编辑：我宁愿不使用 jQuery。
采纳答案by Sandesh K
Edit: Use fetch for making API calls.
编辑：使用 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 is available in all modern browsers.
Fetch 适用于所有现代浏览器。
回答by Hylle
Try using Fetch API, it's recommended by Facebook. You should avoid mixing in jQuery with ReactJS and stick to the ReactJS way of manipulating the DOM.
尝试使用 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);
});
}
Or using 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
https://facebook.github.io/react-native/docs/network.html
I'm aware the URL is for React Native's documentation, but this apply for ReactJS as well.
我知道 URL 是用于 React Native 的文档，但这也适用于 ReactJS。
回答by Michael Lange
Hi Wasteland (best game of all time, btw - but that's for a different post :)
嗨，废土（有史以来最好的游戏，顺便说一句——但那是一个不同的帖子:)
Easiest way:
最简单的方法：
Use axios library: //cdnjs.cloudflare.com/ajax/libs/axios/0.8.1/axios.min.js
使用 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
});
})
}
回答by Mahyar
In React version 16 or higher, the following function can be used:
在 React 16 或更高版本中，可以使用以下函数：
yourFunctionName = async() => {
const api_call = await fetch(`yourUrl`);
const data = await api_call.json();
console.log(data);
}
回答by Indraneel Bende
http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp
http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp
Well u will have to use Ajax. Check the link above. Try to make a call during one of the component lifecycle methods. This does not use JQuery.
那么你将不得不使用 Ajax。检查上面的链接。尝试在组件生命周期方法之一期间进行调用。这不使用 JQuery。
