尝试将 api 与 react native 连接

Question

我正在尝试使用 react-native 连接 api。我需要使用 php，没有其他可能，因为我将连接一个已经建立的系统并且它在 php 中。数据库是postgresql

php代码：

<?php
  $connect = pg_connect ("host=localhost port=5432 dbname=teste user=postgres password=123");

  $json = file_get_contents('php://input');

  $obj = json_encode($json, true);

  $name = $obj['name'];

  $insert = "INSERT INTO usuario (id, name) VALUES (3, '$name')";
  $query = pg_query($connect, $insert);

  if($query){
      echo json_encode('Registrado');
  }else{
      echo json_encode("Falha");
  }
  // include "connect.php";
?>

反应原生代码：

export default function App() {

  const [name, setName] = useState('');

  function register() {
    fetch('http://localhost/postgresql/', {
      method: 'POST',
      header: {
        'Accept': 'application/json',
        'Content-type': 'application/json'
      },
      body:JSON.stringify({
        name: name,
      })
    })
    .then((response) => response.json())
      .then((responseJson) => {
        alert(responseJson)
      })
      .catch((error) => {
        alert(error)
      })
  }

  return (
    <View>
      <Text>
        Bem vindo ao meu App!
      </Text>

      <TextInput 
        placeholder="Enter name"
        onChangeText={name => setName(name)} 
        value={name}
      />

      <Button 
        title="Registrar"
        onPress={register}
      />
    </View>
  )
}

当我尝试注册时，它给出了一个错误。 “网络请求失败”

Pgadmin 正在运行

Answer 1

您应该首先确定问题出在服务器还是应用程序上。您可以使用 Postman (https://www.postman.com/) 执行此操作。使用 Postman 发送您的请求，看看是否一切都正确返回。如果 Postman 也无法连接，则问题出在您的服务器上，您应该进一步调查该方向。否则，问题出在您的应用程序上，可能有多种原因。

如果您使用 IOS 运行应用程序，Network Request Failed 错误可能是由于获取 HTTP 资源而导致的，因为默认情况下 IOS 不允许这样做。您可以将 SSL 添加到您的服务器（如何为 Apache Web 服务器执行此操作：https://httpd.apache.org/docs/2.4/ssl/ssl_howto.html）并通过 HTTPS 获取，或者在您的 info.plist 文件中添加一个条目（请参阅此处 https://stackoverflow.com/a/38427829/17922074 了解更多信息） .

与您的代码相关的其他几点：

您绝对应该查看为您的数据库交互准备好的语句 (https://www.php.net/manual/de/function.pg-prepare.php)。因为这样，您的应用程序将容易受到 SQL 注入攻击 (https://www.w3schools.com/sql/sql_injection.asp)。

如果您想构建更大的应用程序，像这样，您需要将整个fetch() 调用复制到您想要获取数据的任何位置。更好的选择是创建可重用的服务功能。我最近写了一篇关于如何做到这一点的帖子：https://schneider-lukas.com/blog/react-connect-rest-api。