Axios PUT Anfrage an Server

Question

Ich habe die Dokumentation auf Axios auf PUT-Anfrage gelesen und es scheint ähnlich zu einer GET-Anfrage. Es gab jedoch keinen Beispielcode wie GET, aber ich gehe davon aus, dass es ähnlich wie eine GET-Anfrage ist. Ich habe anscheinend Probleme, eine PUT-Anfrage mit Axios zu machen. Das ist, was ich bisher mit einem Testserver habe, die ich verwende:

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

Grundsätzlich ist ein Element auszuwählen versuchen und Änderungen daran vornehmen.

Answer 1

Ich denke, Sie verstehen nicht, wie Axios und HTTP-Anfragen arbeiten. Wenn Sie eine PUT-Anfrage machen, müssen Sie die Daten senden, die Sie in den Artikel "packen" möchten. Sie scheinen zu denken, dass Sie, wenn Sie eine PUT-Anfrage machen, den Artikel zurück erhalten, den Sie dann bearbeiten können und ihn automatisch speichern lassen, was nicht stimmt.

Bild, dass Sie eine ganze Reihe von Katzen hatten, und sie hatten Namen, Bilder und Beschreibungen über sie. Jetzt sagen Sie, dass Sie den Namen der Katze aktualisieren möchten, die durch die Nummer 1 (das ist ihre ID) identifiziert wird. Hier

ist ein Beispiel für eine PUT-Anforderung mit (durch Axios), die Katze Namen zu aktualisieren:

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

Sehen Sie, wie ich musste angeben, welche Katze I (indem sie die eindeutige URL für das aktualisieren wollte Katze) und liefern auch die spezifischen Daten, die ich aktualisiert werden möchte (der Name)? Nun wäre es an Ihrem Server zu sehen, dass es eine PUT-Anfrage für die erste Katze erhalten hat und dass die Daten sagen, dass der Name "Tophat Cat" aktualisiert werden soll.

Dann wird der Server würde eine Antwort senden (es alles von „Das Update war erfolgreich.“ Könnte zu einer JSON Darstellung der Daten der aktualisierten Katze.

Denken Sie daran, sollte eine PUT-Anforderung nur für die Aktualisierung von Daten verwendet werden, Wenn Sie neue Daten hinzufügen möchten (was in Ihrem Beispiel ein wenig aussieht, da Sie die Anfrage nur auf /cats ohne ID verwiesen haben), sollten Sie stattdessen eine POST-Anfrage verwenden vorgesehen für Hinzufügen neuer Daten und PUT-Anforderungen sind für Aktualisierung vorhandener Daten.

vorgesehen

würde die POST-Anfrage oben auf das PUT-Anfrage Beispiel sehr ähnlich aussehen, 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); 
    }); 

Jetzt wird die Anfrage nur /cats zu gehen, die in einem REST-API (es sein kann, ist nicht typisch zeigte auf eine bestimmte Katzen ID, weil die Katze noch nicht existiert). Es gibt auch alle die Daten an, die benötigt werden, um eine neue Katze zu erstellen. In der PUT-Anfrage haben wir nur das hinzugefügt, was wir aktualisieren wollten. In einer POST-Anfrage existieren die anderen Daten noch nicht, also müssen wir alles spezifizieren.