Richtige Weg, um API Fetch 'POST' mit Async/Await

Arbeite ich an einem Projekt, das erfordert, dass Sie mich für eine Anfrage zu einer API. Was ist die richtige form für Sie eine POST-Anfrage mit Async/Await?

Als ein Beispiel, hier ist mein fetch", um eine Liste aller Geräte. Wie würde ich mich über das ändern dieser Anfrage zu POSTEN um einen neues Gerät anzulegen? Ich verstehe, müsste ich einen header hinzufügen, der mit einer Daten-Körper.

getDevices = async () => {
  const location = window.location.hostname;
  const response = await fetch(
    `http://${location}:9000/api/sensors/`
  );
  const data = await response.json();
  if (response.status !== 200) throw Error(data.message);
  return data;
};
  • await macht es keinen Unterschied, wie die fetch - API funktioniert. Machen Sie es eine post-Anforderung in der gleichen Weise wie bei jedem anderen Einsatz von fetch.
InformationsquelleAutor Nik Ackermann | 2018-04-26
  1. 14

    eigentlich dein code verbessert werden kann, wie diese:

    zu tun, ein post nur hinzufügen, dass die Methode auf die Einstellungen der Anruf heranholen.

    getDevices = async () => {
    const location = window.location.hostname;
    const settings = {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        }
    };
    try {
        const fetchResponse = await fetch(`http://${location}:9000/api/sensors/`, settings);
        const data = await fetchResponse.json();
        return data;
    } catch (e) {
        return e;
    }    

}
    • Sie können eineawait zum Lesen der Antwort-stream: const data = fetch(url); const json = await data.json();
    • Sie haben Recht, aktualisieren Sie die Antwort
    InformationsquelleAutor Prince Hernandez
  2. 9

    Hier ist ein Beispiel mit der Konfiguration:

    try {
    const config = {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    }
    const response = await fetch(url, config)
    //const json = await response.json()
    if (response.ok) {
        //return json
        return response
    } else {
        //
    }
} catch (error) {
        //
}
    InformationsquelleAutor Ali Ankarali
  3. 0

    Denken Sie daran, zu vermeiden, zu kombinieren async/await und then hier ist ein Beispiel:

    const addDevice = async (device) => {
  const { hostname: location } = window.location;
  const settings = {
    method: 'POST',
    body: JSON.stringify(device),
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    }
  }

  const response = await fetch(`http://${location}:9000/api/sensors/`, settings);
  if (!response.ok) throw Error(response.message);

  try {
    const data = await response.json();
    return data;
  } catch (err) {
    throw err;
  }
};
    InformationsquelleAutor TomasVeras
Schreibe einen Kommentar