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 条评论
登录 后参与评论

相关文章

来自专栏Web 开发

ckeditor 从入门到放弃

通过 CKEDITOR.plugins.add方法添加插件,第一个参数为插件名,后面为参数列表。

500
来自专栏数据之美

线上服务 CPU 100%?一键定位 so easy!

背景 经常做后端服务开发的同学,或多或少都遇到过 CPU 负载特别高的问题。尤其是在周末或大半夜,突然群里有人反馈线上机器负载特别高,不熟悉定位流程和思路的同学...

3378
来自专栏技术小讲堂

Singal Page App:使用Knockout和RequireJS创建高度模块化的单页应用引擎背景知识文档结构服务端API准备Require配置与系统配置模块中的工作模块间的工作烂图赏鉴代码送上

开篇扯淡 距离上一篇文章已经有好几个月,也不是没有时间记录点东西,主要是换了新的工作,在一家外资工作,目前的工作内容大多都是前端开发,新接触的东西因为时间原因,...

2686
来自专栏晓晨的专栏

IdentityServer Topics(5)- 使用第三方登录

773
来自专栏nimomeng的自我进阶

了解和分析iOS Crash Report

翻译自苹果官方文档:Understanding and Analyzing Application Crash Reports

692
来自专栏Linyb极客之路

nginx限制IP恶意调用短信接口处理方法

1、过滤日志访问API接口的IP,统计每10分钟调用超过100次的IP,直接丢进nginx的访问黑名单

1153
来自专栏FreeBuf

Python的无状态SYN快速扫描

起因 freebuf中有一篇文章,讲述了基本的扫描原理并给出了简易的python代码,几种扫描方式中我发现SYN的扫描准确率高返回的信息明确,而且不会留下握手的...

2556
来自专栏NetCore

打造属于自己的支持版本迭代的Asp.Net Web Api Route

    在目前的主流架构中,我们越来越多的看到web Api的存在,小巧,灵活,基于Http协议,使它在越来越多的微服务项目或者移动项目充当很好的service...

22210
来自专栏程序员的SOD蜜

使用CefSharp开发一个12306“安心刷票弹窗通知”工具

有需求就要改进 最近两年没有在春节回家过年了,主要是票太难买,虽然之前写了一个12306“无声购票弹窗”工具,解决了抢票问题,但是全家老小一起回去还是很累,干脆...

34310
来自专栏本立2道生

Win32对话框程序(1)

之前学C语言是一直都是在控制台下面操作的,面对的都是黑框框,严重的打击了学习的兴趣。后来在TC下进行C语言课程设计,做了图形界面编程,但都是点线面画的…… 

531

扫码关注云+社区