Axios PUT-Anforderung an server

Ich Lesen Sie die Dokumentation zu axios auf PUT-Anfrage und es scheint ähnlich zu einer GET-Anfrage. Jedoch, es war nicht ein Beispiel-code wie GET, aber ich vermute, es ist ähnlich, wie eine GET-Anforderung. Ich habe wohl Problem machen eine PUT-Anforderung mit axios. Dies ist, was ich habe, so weit mit einem test-server, die ich benutze:

axios.put('http://localhost:8080/cats')
  .then(res => {
    this.setState({
      cat: res
    });
  })
  .catch((err) => {
    console.log(err);
  })

Grundsätzlich bin ich versucht, ein Element auswählen und änderungen vornehmen.

  • mit einem PUT würde man erwarten, einige Daten zu setzen ... I seem to have issue was ist das Problem? und Fehler? eine Warnung? Ihr Hund weggelaufen ist?
  • Herzlich willkommen auf Stack Overflow, Lesen Sie bitte über Wie man eine Frage stellen und so erstellen Sie eine Minimale, Vollständige und Überprüfbare Beispiel in dieser Website. Immer spezifisch sein und Ihre besten Anstrengungen machen, bevor Sie Fragen. In diesem Fall, Sie don ' T erwähnen die Fehler, so dass wir nicht wissen können, was falsch ist.
  • BTW Ihr strurcture sein muss, wie dies // Send a PUT request axios({ method: 'put', url: 'http://localhost:8080/cats', data: { data: 'some data here' } }); Check das web für mehr info axios
InformationsquelleAutor jann | 2017-05-22
  1. 5

    Ich glaube, Sie verstehen nicht, wie Axios und HTTP-requests arbeiten. Wenn Sie eine PUT-Anfrage, senden Sie die Daten, die Sie wollen, um zu "setzen" in die Position. Sie scheinen zu denken, dass, wenn Sie eine PUT-Anfrage erhalten Sie die Artikel zurück, die können Sie dann Bearbeiten und speichern automatisch, das ist nicht wahr.

    Bild, dass Sie hatte eine ganze Reihe von Katzen, und Sie hatten Namen, Bilder und Beschreibungen über Sie. Jetzt sagen Sie, Sie wollen zu aktualisieren Sie den Namen der Katze, die gekennzeichnet ist durch die Zahl 1 (das ist seine ID).

    Hier ist ein Beispiel mit einer PUT-Anfrage (über Axios) zu aktualisieren, dass die Katze name:

    axios.put('https://example.com/cats/1', {
    name: 'Tophat Cat'
  })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(err);
  });

    Sehen, wie ich hatte, um anzugeben, welche Katze ich wollte zu aktualisieren (indem Sie die eindeutige URL für die Katze) und liefern auch die spezifischen Daten möchte ich aktualisiert (die Namen)? Jetzt würde es bis zu Ihrem server, um zu sehen, dass es erhielt eine PUT-Anforderung für die erste Katze ist, und dass die Daten sagt, um den Namen zu aktualisieren, um "Tophat Katze".

    Dann würde der server eine Antwort senden (es kann alles sein, von "war Das update erfolgreich.", um eine JSON-Darstellung der aktualisierten Katze Daten.

    Denken Sie daran, eine PUT-Anfrage sollte nur verwendet werden, für die Aktualisierung von Daten, die bereits vorhanden ist. Wenn Sie möchten, um neue Daten hinzufügen (das ist, was es sieht aus wie ein wenig in deinem Beispiel, da waren Sie weist den Antrag nur /cats ohne eine ID), sollten Sie stattdessen eine POST-Anfrage. POST-Anfragen sind nur für hinzufügen von neuen Daten und PUT-Anfragen sind nur für Aktualisierung der bestehenden Daten.

    Den POST-request würde sehr ähnlich Aussehen, um die PUT-Anfrage Beispiel oben, aber mit einigen wichtigen änderungen:

    axios.put('https://example.com/cats', {
    name: 'Catsandra',
    image: 'https://example.com/images/catsandra.jpg',
    description: 'Catsandra is the fanciest cat in town!'
  })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(err);
  });

    Nun die Anfrage wird nur /cats was ist typisch in einer REST-API (es kann nicht sein, verwies auf eine spezifische cat-ID, weil die Katze noch nicht existiert). Es gibt auch alle die Daten, die erforderlich sind, um eine neue Katze. In dem Wunsch, den wir nur aufgenommen, was wir wollten, zu aktualisieren. In einer POST-Anforderung, die anderen Daten, die noch nicht existiert, so müssen wir festlegen, alles.

    InformationsquelleAutor Nathan Heffley
Schreibe einen Kommentar