反应原生表单请求答案

【问题标题】：React Native Form request反应原生表单请求
【发布时间】：2016-12-07 11:05:05
【问题描述】：

我正在尝试将简单的 POST Forms React Native Fetch 请求从 Android 模拟器发送到 NodeJS 服务器。 NodeJS 服务器没有检测到这一点（它通过使用 Postman api 工作）。请帮帮我:)

Server.js：

var express = require('express');
var app = express();

var accs = [];

var server = app.listen(8082, function () {
   var host = server.address().address
   var port = server.address().port

   console.log("Example app listening at http://%s:%s", host, port)
})

app.post('/register', function(req, res) {
  console.log("here");
  let login = req.query.login;
  let password = req.query.password;
  accs.push({login: hashCode(login), password: hashCode(password)})
  console.log(login + " " + password);
  res.send("Created: L:" + hashCode(login) + " P:" + hashCode(password));
})

React Native Fetch：

  registerAcc() {
    var details = {
    'login': 'Login',
    'password': 'Password!',
  };

  var formBody = [];
  for (var property in details) {
    var encodedKey = encodeURIComponent(property);
    var encodedValue = encodeURIComponent(details[property]);
    formBody.push(encodedKey + "=" + encodedValue);
  }
  formBody = formBody.join("&");

  fetch('http://localhost:8082/register', {
    method: 'POST',
    headers: {
      'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
      'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
    },
      body: formBody
    }).then((response) => {
      this.setState({msg : "1"})
    }).catch((error) => {
      this.setState({msg : '2'});
    });
  }

模拟器还显示一个通信：

Possible Unhandled Promise Resection (id: 0)：网络请求失败了……

但是提供了catch功能。

【问题讨论】：

标签： javascript node.js react-native request fetch

【解决方案1】：

当您在 Android Emulator 中使用“localhost”时，指的是移动设备而不是您的计算机中。

您可以在应用程序中将localhost替换为“10.0.2.2”，这是android模拟器主机的别名，在这种情况下，您的计算机。

见：https://developer.android.com/studio/run/emulator-commandline.html#networkaddresses

或者

获取网络地址，您也可以在手机上运行（如果在同一网络中）。在 Windows 中，在 CMD 中使用命令 ipconfig 获取网络 IPv4 地址。

【讨论】：