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>
    )
}