ajax发送请求时如何获取响应（XMLHttpRequest）

Question

/* 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?

大家好，

我的代码（前端）的顶部是一个以 json 格式发送请求的 ajax。

我的代码（节点/快速服务器）的底部执行以下操作： 1) 接收请求 2) 在数据库中插入“request.body” 3) 将响应发送回前端。

这个响应是一个包含 request.body 的 Promise。如何在我的前端代码中检索此响应？似乎 ajax 可以帮助我发送请求，但对检索返回的响应没有任何作用。

谢谢！

附：由于这个数据最初是从前端发送的，所以有人可能会说前端已经有了这个数据。但是，我只想知道，一般来说，当请求由 ajax 发送时，如何检索响应。

Answer 1

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

xhr 有一个事件处理程序 onreadystatechange ， 当 xhr.readyState == XMLHttpRequest.DONE 时，可以说请求已经成功。

可以通过@https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState获取更详细的文档

也可以从xhr.status

获取http请求的状态码

XMLHttpRequest 是一个非常有用的 API，但是它太低级了，现在被 FETCH API 取代了，非常棒，它还支持 promise 接口，这意味着你可以使用 .then 和.catch 或更新的 async/await。

你可以在这里阅读@https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

还有一个例子@https://googlechrome.github.io/samples/fetch-api/fetch-post.html