POST-Request senden in React Native

Während GET Daten abruft, sendet POST Daten AN einen Server – der klassische Fall für Formulare: Registrierung, Kontaktformular, neuen Datensatz anlegen. Diesmal mit der eingebauten fetch()-API statt Axios, zum direkten Vergleich der beiden Ansätze.

1. Beschreibung

Bei fetch() müssen Methode, Header und Body EXPLIZIT angegeben werden – anders als bei Axios' axios.post(url, daten) übernimmt fetch() weder automatisch die Content-Type-Header noch die JSON-Serialisierung des Bodys.

2. Kurzes Beispiel

const antwort = await fetch('https://api.example.com/kontakte', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Anna' }),
});
const daten = await antwort.json();

3. Komplettes Projekt: Feedback-Formular

npx create-expo-app post-request-demo
cd post-request-demo

App.js

import { useState } from 'react';
import { View, TextInput, Button, Text, ActivityIndicator, StyleSheet } from 'react-native';

export default function App() {
  const [name, setName] = useState('');
  const [nachricht, setNachricht] = useState('');
  const [wirdGesendet, setWirdGesendet] = useState(false);
  const [ergebnis, setErgebnis] = useState(null);

  async function absenden() {
    setWirdGesendet(true);
    setErgebnis(null);
    try {
      const antwort = await fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: name, body: nachricht }),
      });

      if (!antwort.ok) {
        throw new Error(`Server antwortete mit Status ${antwort.status}`);
      }

      const daten = await antwort.json();
      setErgebnis(`Gesendet! Neue ID: ${daten.id}`);
      setName('');
      setNachricht('');
    } catch (fehler) {
      setErgebnis(`Fehler: ${fehler.message}`);
    } finally {
      setWirdGesendet(false);
    }
  }

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Ihr Name"
        value={name}
        onChangeText={setName}
      />
      <TextInput
        style={[styles.input, styles.mehrzeilig]}
        placeholder="Ihre Nachricht"
        value={nachricht}
        onChangeText={setNachricht}
        multiline
      />
      <Button
        title="Absenden"
        onPress={absenden}
        disabled={wirdGesendet || !name || !nachricht}
      />
      {wirdGesendet && <ActivityIndicator style={styles.spinner} />}
      {ergebnis && <Text style={styles.ergebnis}>{ergebnis}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 24 },
  input: { borderWidth: 1, borderColor: '#d1d5db', borderRadius: 8, padding: 10, marginBottom: 12 },
  mehrzeilig: { height: 100, textAlignVertical: 'top' },
  spinner: { marginTop: 16 },
  ergebnis: { marginTop: 16, textAlign: 'center' },
});

4. Erklärung

headers: {{ 'Content-Type': 'application/json' }} ist bei fetch() PFLICHT, damit der Server den Body korrekt als JSON interpretiert – ohne diesen Header würde er oft als Text behandelt.
body: JSON.stringify(...) – fetch() serialisiert NICHT automatisch, im Gegensatz zu Axios; das Objekt muss manuell in einen JSON-String umgewandelt werden.
antwort.ok prüft, ob der Statuscode im Bereich 200–299 liegt – fetch() wirft bei einem 4xx/5xx-Status KEINEN Fehler automatisch (anders als Axios), diese Prüfung muss man selbst vornehmen.
disabled={{wirdGesendet || !name || !nachricht}} verhindert Mehrfach-Absenden während einer laufenden Anfrage UND leere Formularübermittlungen in einem Ausdruck.

5. Ausgaben

Ausgabe

Zwei Eingabefelder (Name, mehrzeilige Nachricht) und ein "Absenden"-Button, der bis zum Ausfüllen beider Felder deaktiviert (ausgegraut) ist. Nach Antippen erscheint kurz ein Ladekreis, danach grüner Text "Gesendet! Neue ID: 101" und beide Felder werden geleert.