XMLHttpRequest 不适用于反应本机应用程序答案

【问题标题】：XMLHttpRequest is not working on react native appXMLHttpRequest 不适用于反应本机应用程序
【发布时间】：2018-06-14 12:54:09
【问题描述】：

我正在使用 XMLHttpRequest api 在 react native android 应用程序中从服务器请求资源这是我的应用代码（客户端）

import React,{Component} from 'react';
import {Text,View,StyleSheet,TouchableOpacity} from 'react-native';
class Home extends Component
{
  state={con:''}

show=()=>
{
    alert("show function called");
    var req=new XMLHttpRequest();
    req.onreadystatechange=(e)=>
    {
        if(req.status==200 && req.readyState==4)
        {
            alert(req.responseText);
        }
    }
    req.open("GET","http://localhost:3000/show_react");
    req.send();
}

render()
{
    return(
    <View style={styles.container}>
    <TouchableOpacity onPress={()=>this.show()} style={styles.box}><Text>Click</Text></TouchableOpacity>
    <Text>{this.state.con}</Text>
    </View>
    );
}
}  
  export default Home;

const styles=StyleSheet.create({
box:
{
    padding:10,
    width:200,
    marginTop:10,
    backgroundColor:'rgba(215, 44, 149, 0.7)',
    alignItems:'center'
},
container:
{
    flexDirection:'row',
    justifyContent:'center'
}
});

下面是我的简单 node.js 代码（服务器端），用于接受来自客户端的请求

app.get("/show_react",function(req,res){
console.log("show_react called");
res.send("hii react");
});

上面的服务器端代码在浏览器请求时运行成功，但在客户端请求时不起作用（反应原生应用程序）。任何答案表示赞赏。

【问题讨论】：

为什么不使用fetch？这是一个更友好的 API，在 React Native 中支持。
但是 XMLHttpRequest api 更容易学习。所有语法都类似于纯javascript XMLHttp请求
fetch 是 Web API 的一部分，就像 XMLHttpRequest 和 是 JavaScript，我不明白你关于“类似于纯 JavaScript 的语法”的说法。 fetch 本身也有更多的功能，并且 由 React Native 支持，这与 XMLHttpRequest 不同。而且 IMO 学习起来并不容易。您可以使用 fetch 用 3 行代码来代替使用 XMLHttpRequest 的 8-10 行代码。
facebook.github.io/react-native/docs/network.html
React Native 支持 XMLHttpRequest。您的代码似乎没有问题，您能否详细说明它是如何不起作用的、您收到了什么、任何错误等？另外，您能否与另一台服务器核对，以确保该问题与 XMLHttpRequest 有关？

标签： javascript android node.js react-native xmlhttprequest

【解决方案1】：

好的...在客户端我刚刚创建了一个按钮。当按钮被触摸时，显示函数被调用。这个 show 函数将创建一个新的 XMLHttpRequest (localhost:3000/show_react) 到在端口 3000 上运行的 localhost 服务器。

如果您在 react native 应用程序中的请求 URL 确实是 localhost:3000/show_react，那么您的问题是 localhost 指向您的本地设备（即智能手机）。该 URL 需要可从您运行 react 本机应用程序的设备访问。尝试在您的设备（即智能手机）上的 Safari 浏览器中浏览到 URL

【讨论】：

【解决方案2】：

为了使用 Fetch，你必须使用一个 React-Native 替代 Fetch； react-native 中的 Fetch API 是 XMLHttpRequest 的包装器。我使用 react-native-blob-util 因为它使用 NativeModules 来实现 fetch。

我确实追踪了为什么我的 XMLHttpRequest 对我来说被破坏了，但我没有找到原因。我确实发现，我可以做 xhr.addEventListener('load', ()...) 而不是 xhr.onload 之类的东西，它会起作用。可能对未来的求职者有所帮助

【讨论】：