美文网首页RN知识
RN-Fetch简单使用及简单封装

RN-Fetch简单使用及简单封装

作者: 精神病患者link常 | 来源:发表于2017-04-26 17:52 被阅读4007次

    啥也不说了直接记录代码吧

    fetch('https://facebook.github.io/react-native/movies.json',{
                method:'GET',//如果为GET方式,则不要添加body,否则会出错    GET/POST
                header:{//请求头
                },
                // body:{//请求参数
                //     'key1':'value1',
                //     'key2':'value2'
                // }
            })
                .then((response) => response.json())//将数据转成json,也可以转成 response.text、response.html
                .then((responseJson) => {//获取转化后的数据responseJson、responseText、responseHtml
                    /*return responseJson.movies; */
    
                    console.log(responseJson);
                }).catch((error) => {
                    console.log(error);
            });
    
    所有的代码就这么多,比起iOS来少的不是一星半点啊,超级简单

    当然啦,喜欢封装的自然少不了封装一下下,下面也仅仅是简单简单简单的封装了一小下而已

    注释的也是很6的
    FetchRequest

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
    
    import React, { Component } from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        TouchableOpacity
    } from 'react-native';
    
    export default class FetchRequest extends Component {
    
        //定义接收请求地址,当然也可以添加请求参数
        //parames 尽量是{'key1':'value1','key2':'value2'}
        //static request(url,parames,callBackSuccess,callBackError){
    
        static request(url,loadCallBack,callBackSuccess,callBackError){
    
            //请求发送中回调,可以加一些loading效果
            loadCallBack();
    
            fetch(url,{
                method:'GET',//如果为GET方式,则不要添加body,否则会出错    GET/POST
                header:{//请求头
                },
                // body:parames//请求参数
            })
                .then((response) => response.json())//将数据转成json,也可以转成 response.text、response.html
                .then((responseJson) => {//获取转化后的数据responseJson、responseText、responseHtml
                    /*return responseJson.movies; */
                    //成功回调
                    callBackSuccess(JSON.stringify(responseJson));//JSON.stringify()避免出现烦人的[object object]
    
                }).catch((error) => {
                    //失败回调
                    callBackError(error);
            });
        }
    }
    
    
    

    使用就更简单了

    import Request from './FetchRequest'
    
    request(){
    
            //调用封装起来的方法
    
            Request.request('https://facebook.github.io/react-native/movies.json',
                ()=>{
                    console.log('请求发送中...')
                },
                (responseData)=>{
                    this.requestSuccess(responseData);
                },
                (error)=>{
                    this.requestError(error);
                })
    
        }
    

    相关文章

      网友评论

        本文标题:RN-Fetch简单使用及简单封装

        本文链接:https://www.haomeiwen.com/subject/xthwzttx.html