ReactNative http网络通讯

安装 fetch

npm install whatwg-fetch --save

1.fetch的Get方式通讯

async sendGet(){
    let response = await fetch('http://192.168.1.138:3000/aa.html');
    if(response.ok){
        let text = await response.text();
        Alert.alert(text);
    }
}

render() {
        return (
            <View style={[Layout.top,{flexDirection:'row',justifyContent:'center',alignItems:'center'}]}>
              <Button
                  onPress={this.sendGet}
                  title="http请求"
                  color="#841584"
                />
            </View>
            )
    }

2.fetch的post方式通讯

 async sendPost(){
     var fetchOptions = {
     method: 'POST',
     headers: {
       'Accept': 'application/json',
       //表单
       'Content-Type': 'application/x-www-form-urlencoded'
     },
     body:'email=aaaaaaa&pwd=bbbbbbbbb'
       };
     let response = await fetch('http://192.168.1.138:3000/shop/aa',fetchOptions);
     let text = await response.text();
     Alert.alert(text);
 }
 render() {
     return (
     <View style={[Layout.top,{flexDirection:'row',justifyContent:'center',alignItems:'center'}]}>
       <Button
               onPress={this.sendPost}
               title="http请求"
               color="#841584"
             />
     </View>
     )
 }

3.fetch的二进制post提交

 async sendBinaryPost(){
     var formData = new FormData();
     formData.append('email','aa');
     formData.append('pwd','bb');
     let response = await fetch('http://192.168.1.138:3000/shop/login',{
     method:'POST',
     headers:{},
     body:formData
     });
     let text = await response.text();
     alert(text);
 }

 render() {
     return (
     <View style={[Layout.top,{flexDirection:'row',justifyContent:'center',alignItems:'center'}]}>
       <Button
               onPress={this.sendBinaryPost}
               title="http请求"
               color="#841584"
             />
     </View>
     )
 }