React Native HTTP网络请求 – React Native实战教程

上一章React Native实战教程请查看：React Native图片Image元素

在本章中，我们将向你展示如何使用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;

输出：