React Native填坑之旅--HTTP请求篇

yexiaobai 发布于2019-08-20 11:27 / 383人阅读

摘要：填坑之旅篇填坑之旅动画填坑之旅请求篇如果不能从头到尾的建立一个应用，那么将失色不少。随着，内置的支持了这个填补回调地狱大坑的功能。很好的利用了这一点，它的请求返回结果就是。在界面上显示异常用，显示警告使用。

React Native填坑之旅--Button篇
React Native填坑之旅--动画
React Native填坑之旅--HTTP请求篇

如果不能从头到尾的建立一个RN应用，那么RN将失色不少。本以为HTTP请求部分需要使用Native的实现，Android和iOS各回各家，各调各库了。Google了一下之后居然RN可以使用fetch库。这个库是用来代替流传已久的XHR的。

下面看看如何使用fetch 请求Restful API的。API是dribbble的。这个API需要注册，所以如果你要运行下面的例子的话，最好注册一下，或者换一个站点的API试试。

随着ES6，JavaScript内置的支持了Promise这个填补回调地狱大坑的功能。fetch很好的利用了这一点，它的请求返回结果就是Promise。所以，bye回调。

fetch的使用非常简单，比现在流行的任何Native库都好用。

fetch("https://api.dribbble.com/v1/shots", init)
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({message: `${responseJson[0].id} - ${responseJson[0].title}`});
            })
            .catch(e => {console.log(`error ${e}`)});

其中的init是一个Object或者说是一个字典，里面包含了关于请求方式是GET或者POST等的信息。看起来是这样的：

        const init = {
            method: "GET",
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json",
                "Authorization": "需要认证数据",
            },
        };

请求发出之后，在第一个then方法里处理response，返回response.json()，返回的是一个对象。

在第二个then方法里消费从response里提取出来的json数据。因为该API返回的是一个数组，所以我们取数组第一个元素，并在Alert中显示这个元素的id和title。

最后，使用一个catch方法处理万一发生的异常。这个错误显示在了console里。你也可以显示在界面上，不过你要确保这样做复合UE的要求。在界面上显示异常用console.error(msg: string)，显示警告使用console.warn(msg: string)。

更新界面

上面提到的都是如何使用fetch请求的。如果你注意代码的话就会发现里面已经包含了如何更新界面的部分。这里在详细解释一下。

在constructor方法里设置组件的state初值为this.state = {message: ""};。在fetch成功的获取到数据，或者出现错误的时候（本例的做法是在console里打印log，这是适合于测试不适合产品环境）更新组件的state。

this.setState({message: `${responseJson[0].id} - ${responseJson[0].title}`});

那么组件就会根据state值更新组件：

{this.state.message ? this.state.message : "Empty"}

是不是非常简单。

全部代码

import React from "react";
import {
    View,
    Alert,
    Text
} from "react-native";

import Button from "../view/touchableButton";

export default class HomeController extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            message: ""
        };

        this.fetchAction = this.fetchAction.bind(this);
    }

    componentDidMount() {

    }

    fetchAction() {
        this.setState({message: "Empty"});

        const init = {
            method: "GET",
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json",
                "Authorization": "需要认证",
            },
            // body: JSON.stringify({
            //
            // })
        };

        fetch("https://api.dribbble.com/v1/shots", init)
            .then((response) => response.json())
            .then((responseJson) => {

                this.setState({message: `${responseJson[0].id} - ${responseJson[0].title}`});
            })
            .catch(e => {console.log(`error ${e}`)});
    }

    render() {
        return (

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80580.html

React Native填坑之旅--class（番外篇）

摘要：构造函数定义侦探类作为例子。里的既是类的定义，也是构造函数。在构造函数中定义的实例方法和属性在每一个实例中都会保留一份，而在原型中定义的实例方法和属性是全部实例只有一份。无论React还是RN都已经迈入了ES6的时代，甚至凭借Babel的支持都进入了ES7。ES6内容很多，本文主要讲解类相关的内容。构造函数定义侦探类作为例子。 ES5的类是如何定义的。 function ES5D...

TwIStOy 2019-08-20 11:37 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
我的Android重构之旅：架构篇

摘要：是的架构的实现。是在年提出的一种前端架构，主要用来处理复杂的逻辑的一致性问题当时是为了解决页面的消息通知问题。去年10月底来到了新公司，刚开始接手 Android 项目时，发现该项目真的是一团遭，项目开发上没有任何架构可言，开发人员连简单的 MVC、MVP 都不了解，Activity 及其臃肿，业务边界也不明确，因此我决定重新分析一下当前主流的几种开发架构，选出适合当前项目的架构形式...

mylxsw 2019-06-24 18:03 评论0 收藏0
React Native 极光推送填坑（ios）

摘要：前言前一段时间，完成了公司的消息推送功能，使用的是极光推送，在配置的推送功能时，遇到了一个坑，记录一下坑使用了极光推送官方的插件。前言前一段时间，完成了公司 app 的消息推送功能，使用的是极光推送，在配置 ios 的推送功能时，遇到了一个坑，记录一下坑使用了极光推送官方的插件 jpush-react-native。按照文档，将 ios 和 android 配置好，结果发现 a...

Travis 2019-08-22 17:59 评论0 收藏0