React-Native中使用fetch()方法来发送请求

在React-Native中发送请求使用fetch方法，该方法是封装过的可以直接使用，不需要从react-native中进行引用。

import React,{Component} from 'react';
import {Button} from 'react-native';
 
export default class DemoComponent
extends Component{

    handlePress=()=>{
        //发起一次网络请求
        var url = "http://jsonplaceholder.typicode.com/users"
        fetch(url).then((response)=>response.json()).then((result)=>{
            console.log(result)
        })
    }

    render(){
        return <Button title="加载数据" onPress={this.handlePress}></Button>
    }
}

给btn的onPress事件绑定一个事件处理函数handlePress，用箭头函数赋值的形式来设置。
直接在事件处理函数中调用fetch方法，传入的参数是请求的路径，然后接上then方法来进行一个json的反序列化，再接上then方法就可以得到响应回来的数据。

如果要发起post请求则

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

export default class LoginComponent extends Component{
    
    constructor(){
        super();
        this.state = {
            uname:'',
            upwd:''
        }
    }

    handlePress=()=>{
      console.log(this.state);
      var url = 'http://178.10.5.6:8080/user/login',config={
         method:'POST',
         headers:{
             "Content-Type":"application/x-www-form-urlencoded"
         },
         body:"uname="+this.state.uname+"&upwd="+this.state.upwd
      }
      fetch(url,config).then((response)=>response.json()).then((res)=>{
          console.log(res);
          if(res.code==200){
              this.props.navigation.navigate('main')
          }else{
             this.setState({uname:''})
             this.setState({upwd:''})
          }
      })
    }

    handleChangeTextUname=(msg)=>{
        this.setState({uname:msg})
    }

    handleChangeTextUpwd=(msg)=>{
        this.setState({upwd:msg})
    }

    render(){

        return <View>
            <TextInput value={this.state.uname} placeholder="请输入用户名" onChangeText={this.handleChangeTextUname}></TextInput>
            <TextInput value={this.state.upwd} placeholder="请输入密码" secureTextEntry={true} onChangeText={this.handleChangeTextUpwd}></TextInput>
            <Button title="登录" onPress={this.handlePress}></Button>
        </View>
    }
}

首先给2个input进行数据绑定，然后给btn的onPress绑上事件处理函数，
当点击登录按钮式触发事件处理函数，在fetch中除了请求的url之外，还有一个参数是config配置对象，在该对象中将method设置为POST，设置响应的请求头，将要发送给服务端的参数放置在body中就可以了。然后进行json的反序列化，再最后接收并处理响应回来的数据即可。