当我使用react-native init (RN版本0.29.1)创建一个全新的项目,并在渲染方法中获取公共facebook演示电影API时,它抛出了一个网络请求失败。有一个非常无用的堆栈跟踪,我不能调试网络请求在chrome控制台。这是我发送的fetch:

fetch('http://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });

当前回答

只是你有Fetch....的变化

fetch('http://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
        /*return responseJson.movies; */
        alert("result:"+JSON.stringify(responseJson))
        this.setState({
            dataSource:this.state.dataSource.cloneWithRows(responseJson)
        })
     }).catch((error) => {
         console.error(error);
     });

其他回答

React Native Docs给出了这个问题的答案。

苹果已经阻止隐式明文HTTP资源加载。所以我们需要添加以下我们的项目的信息。Plist(或等效)文件。

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

测试您的集成->添加应用程序传输安全例外

通过在0.0.0.0上运行模拟服务器 注意:当你使用json-server运行另一个服务器时,这在Expo上有效。

另一种方法是在0.0.0.0而不是localhost或127.0.0.1上运行模拟服务器。

这使得模拟服务器可以在LAN上访问,因为Expo要求开发机器和运行Expo应用程序的移动设备在同一个网络上,所以模拟服务器也可以访问。

在使用json-server时,可以使用以下命令实现这一点

Json-server——host 0.0.0.0——port 8000 ./db。json,看

请访问此链接了解更多信息。

对于Android设备,进入您的项目根文件夹并运行命令:

adb reverse tcp:[your_own_server_port] tcp:[your_own_server_port]

例如:adb reverse tcp:8088 tcp:8088

这将使您的物理设备(即。Android手机)监听本地主机服务器运行在您的开发机器(即您的计算机)地址http://localhost:[your_own_server_port]。

之后,你可以直接在react-native fetch()调用中使用http:localhost:[your_port] /your_api。

不建议允许http的所有域。 只对必要的域进行例外处理。

来源:在iOS 9和OSX 10.11中配置应用程序传输安全例外

将以下内容添加到信息中。你的应用的Plist文件:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>yourserver.com</key>
    <dict>
      <!--Include to allow subdomains-->
      <key>NSIncludesSubdomains</key>
      <true/>
      <!--Include to allow HTTP requests-->
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <true/>
      <!--Include to specify minimum TLS version-->
      <key>NSTemporaryExceptionMinimumTLSVersion</key>
      <string>TLSv1.1</string>
    </dict>
  </dict>
</dict>

对于fetch API,你应该在.then中处理错误情况。

例如:

fetch(authURl,{ method: 'GET'})
.then((response) => {      
  const statusCode = response.status;
  console.warn('status Code',statusCode);
  if(statusCode==200){
    //success code
  }else{
    //handle other error code
  }      
},(err) => {
  console.warn('error',err)
})
.catch((error) => {
  console.error(error);
  return error;
});