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

相关文章

来自专栏分布式系统和大数据处理

.Net Remoting(远程方法回调) - Part.4

根据这三点的变化,我们可以看出:客户端含有客户端对象,但它还需要远程服务对象的元数据来构建代理;服务端含有服务对象,但它还需要客户端对象的元数据来构建代理。因此...

1162
来自专栏大内老A

WCF技术剖析之十七:消息(Message)详解(中篇)

在上篇中大体上围绕着Message的两个话题进行讲述:消息版本(Message Version)和采用五种不同的方式创建Message。本篇文章将会详细介绍Me...

1979
来自专栏Java3y

Servlet第四篇【request对象常用方法、应用】

什么是HttpServletRequest HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所...

4485
来自专栏破晓之歌

Django 2.0 新特性 转

2017年12月2日,Django官方发布了2.0版本,成为多年来的第一次大版本提升,那么2.0对广大Django使用者有哪些变化和需要注意的地方呢?

1072
来自专栏机器学习从入门到成神

关于hibernate中对象的三种状态分析

一、首先Hibernate中对象的状态有三种:瞬态、游离态和持久态,三种状态转化的方法都是通过session来调用,瞬态到持久态的方法有save()、saveO...

2251
来自专栏JMCui

多线程编程学习三(线程间通信).

一、概要 线程是操作系统中独立的个体,但这些个体如果不经过特殊的处理就不能成为一个整体,线程间的通信就是成为整体的必用方案之一。可以说,使线程进行通信后,系统...

2894
来自专栏技术之路

node.js 事件循环

  node.js是单线程的应用程序,但是他可能通过event和callback来支持并发。所有的node.js都是单线程的,也是异步的,他们使用调用异步函数来...

2326
来自专栏大内老A

WCF技术剖析之二十五: 元数据(Metadata)架构体系全景展现[WS标准篇]

元数据实际上是服务终结点的描述,终结点由地址(Address)、绑定(Binding)和契约(Contract)经典的ABC三要素组成。认真阅读过《WCF技术剖...

3999
来自专栏Python研发

Django|第一部

  注明的MVC模式:所谓MVC就是把web应用分为模型(M),控制器(C),视图(V)三层;他们之间以一种插件似的,松耦合的方式连接在一起.

2203
来自专栏安恒网络空间安全讲武堂

writeup分享 | 近期做的比较好的web

0x01猫头鹰嘤嘤嘤 http://124.128.55.5:30829/index.php 首先分析一下功能,随便上传一张jpg图片上传,跳转到 http...

6028

扫码关注云+社区

领取腾讯云代金券