React Native的HTTP请求

Oceanlong

发布于 2018-07-03 13:05:57

1.9K0

发布于 2018-07-03 13:05:57

文章被收录于专栏：移动开发面面观

前言

在一般的手机App中，HTTP请求是一种最常见的获取数据的方式。我们的App要连上广阔的互联网，才能带来一个丰富的世界。那么，在React Native中如何发起HTTP请求呢？

发起网络请求

要从任意地址获取内容的话，只需简单地将网址作为参数传递给fetch方法即可（fetch这个词本身也就是获取的意思）：

fetch('https://mywebsite.com/mydata.json')

Fetch还有可选的第二个参数，可以用来定制HTTP请求一些参数。你可以指定header参数，或是指定使用POST方法，又或是提交数据等等，具体方法可以参考文档。

在这里，我们封装一个极简的get请求：

var HttpClient={
    requestAsync:function(url , callback){
      fetch(url)
      .then((response) => response.json() )
      .then((responseJson)=>{
        callback.call(this,responseJson);
      })
      .catch((error)=>{
        console.error(error);
      });
    }

}

export default HttpClient;

这个方法非常简单，我们只设计了两个形参（url和回调）。整个fetch方法，十分类似函数式编程的模式。

一个例子

需求

请求https://facebook.github.io/react-native/movies.json获得它的title字段的信息并显示出来。

code:

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,

} from 'react-native';

import HttpClient from '../AwesomeProject/App/widget/HttpClient'

class HelloWorld extends Component {
  render(){
    return (
      <Text>{this.state.title}</Text>
    )
  }

  constructor(props) {
    super(props);
    this.state={
      title:'loading',
    };
    var self = this;
    var httpUrl = 'https://facebook.github.io/react-native/movies.json';
    HttpClient.requestAsync(httpUrl , function(responseJson){
      self.setState({
        title:responseJson.title,
        movies:responseJson.movies,
      })
    });
  }
}


AppRegistry.registerComponent('AwesomeProject', () => HelloWorld);

这里我们运用了上一节的state的知识。在HelloWorld的初始化时，我们将this.state.title设为loading。然后在HTTP请求的回调中，将responseJson中的title取出，存入this.state.title中。

由于this.state的值发生改变，render方法会被重新调用。此时this.state.title中的值已经是我们请求回来的数据了，即可渲染成功。

如有问题，欢迎反馈。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017.05.22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

react

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

react

登录后参与评论

0 条评论

热度