React-Native fetch的使用

1、最简单的使用

//RN中文网上写的https://mywebsite.com/mydata.json是伪代码，需要替换成自己实际请求地址
fetch('http://chenxiaoping.com/demo')

2.请求头和请求参数的定义

fetch('http://chenxiaoping.com/demo', {
    //请求方式，GET或POST
    method: 'GET',

    //请求头定义
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    
    //请求参数，如果有的话，可以这样方式定义,注意需要服务端支持json入参，如果不支持的话，可以尝试下面的方式
    //body: JSON.stringify({
    //   firstParam: 'value1',
    //   secondParam: 'value1',
    // }),

    //如果服务端不支持json入参，请使用这种拼接方式
    //body: 'key1=value1&key2=value2'

}).then((response) => response.json()).then(
    //响应体，resonse,json拿到的就已经是转化好的jsonObject了，使用起来就非常简便
    (responseJson) => {
        //输出打印current_user_url字段，输出的内容可以直接在androidStudio日志输出里面看到
        console.log("请求回调：" + responseJson.current_user_url);
    }
)

3、完整的代码

import React, {Component} from 'react';
import {View, Text, Alert, Button, StyleSheet} from 'react-native';

class NewWorkDemoActivity extends Component {
    render() {
        return (
            
                HelloWorldddd
                
            
        );
    }
}

//请求网络
const request = () => {
    console.log("点击了事件");
    fetch('http://chenxiaoping.com/demo', {
        //请求方式，GET或POST
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        }
    }).then((response) => response.json()).then(
        (responseJson) => {
            console.log("请求回调：" + responseJson.current_user_url);
        })
};

let styles = StyleSheet.create({
    style_root: {
        backgroundColor: "#fae",
        flex: 1
    },
    style_text: {
        margin: 20,
    }
})

export default NewWorkDemoActivity

坚持每天更新，加油！！！

来自于链接：https://www.jianshu.com/p/c707197febd6