php - 尝试将 api 与 native react 连接起来

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";
?>

react native 代码:

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 注入(inject)攻击 (https://www.w3schools.com/sql/sql_injection.asp)。

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