React Native的HTTP请求

前言

在一般的手机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中的值已经是我们请求回来的数据了,即可渲染成功。

如有问题,欢迎反馈。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2717
来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

4878
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2060
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5476
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

31710
来自专栏java 成神之路

使用 NIO 实现 echo 服务器

4667
来自专栏落花落雨不落叶

canvas画简单电路图

62011
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2645
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2536

扫码关注云+社区