上一章React
Native实战教程请查看：React
Native图片Image元素
【React Native HTTP网络请求 –
React Native实战教程】在本章中，我们将向你展示如何使用fetch处理HTTP网络请求。
App.js
import React from 'react';
import HttpExample from './http_example.js';
const App = () => {
return <
HttpExample />;
};
export default App;
使用fetch一旦组件被挂载，我们将使用componentDidMount生命周期方法从服务器加载数据，该函数将向服务器发送GET请求，返回JSON数据，将日志输出到控制台并更新状态。
http_example.js
import React, {Component} from 'react';
import {View, Text} from 'react-native';
class HttpExample extends Component {
state = {
data: '',
};
componentDidMount = () => {
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'GET',
})
.then(response => response.json())
.then(responseJson => {
console.log(responseJson);
this.setState({
data: responseJson,
});
})
.catch(error => {
console.error(error);
});
};
render() {
return (
<
View>
<
Text>{this.state.data.body}<
/Text>
<
/View>
);
}
}
export default HttpExample;
输出：
文章图片
推荐阅读
- React Native Button元素 – React Native实战教程
- React Native图片Image元素 – React Native实战教程
- React Native ScrollView元素 – React Native实战教程
- React Native使用文本输入TextInput元素 – React Native实战教程
- React Native列表ListView – React Native实战教程
- Scala中的方法重载用法指南
- PHP json_decode()函数用法详细介绍
- CSS实现脉冲和阴影详细代码介绍
- 学习ReactJS之前必须了解的5大技能