Wie eine Antwort abzurufen, wenn der Antrag von Ajax (XMLHtttpRequest)

Question

gesendet wird, alle

/* the following **frontend** function is invoked to 
    send a new post (in json) to the node server */ 

addPost(postData) { 
    const xhr = new XMLHttpRequest(); 
    xhr.open('POST', `${process.env.REACT_APP_BACKEND}/posts`); 
    xhr.setRequestHeader('Content-Type', 'application/json'); 
    xhr.send(JSON.stringify(postData)); 
} 

/* the following **server** code picks up the request 
    from the function above */ 

app.post('/posts', bodyParser.json(), (request, response) => { 
    new Promise(resolve => { 
      // code to add request.body to database will be here 
      resolve(request.body); 
     }) 
     .then(data => response.send(data)); // *** How do I retrieve 
    }          // *** this "data" in 
);           // *** my frontend code? 

Hallo,

Der obere Teil meines Codes (Frontend) ein Ajax ist, die eine Anforderung im JSON-Format sendet.

Der untere Teil meines Codes (node ​​/ Express-Server) geschieht Folgendes: 1) empfängt die Anforderung 2) fügt sendet "request.body" in einer Datenbank 3) an das Frontend eine Antwort zurück.

Diese Antwort ist ein Promise, das den request.body enthält. Wie kann ich diese Antwort in meinem Frontend-Code abrufen? Es scheint, dass Ajax mir hilft, Anfragen zu senden, aber nichts dagegen tut, die Antwort zurückzuholen, die zurückkommt.

Danke!

P.S. Da diese Daten ursprünglich vom Frontend gesendet wurden, könnte man sagen, dass das Frontend diese Daten bereits besitzt. Ich möchte jedoch im Allgemeinen wissen, wie man eine Antwort erhält, wenn die Anfrage von Ajax gesendet wird.

Answer 1

const xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState == XMLHttpRequest.DONE) { 
     console.log(xhr.responseText); 
    } 
} 

xhr hat einen Event-Handler onreadystatechange, kann man sagen, dass der Antrag erfolgreich ist, wenn xhr.readyState == XMLHttpRequest.DONE.

detaillierteren doc dazu finden @https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState

in Anspruch genommen werden Sie auch den Statuscode der HTTP-Anforderung von xhr.status

XMLHttpRequest ist ziemlich nützlich API bekommen, aber es ist zu niedrig Ebene, wird es jetzt von FETCH API, die genial ist, unterstützt es auch Versprechen Schnittstelle, das heißt, Sie können. Then und .Catch oder die neuere Async/erwarten.

Sie können es hier nachlesen @https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

und ein Beispiel @https://googlechrome.github.io/samples/fetch-api/fetch-post.html