（XMLHtttpRequest）

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形式でリクエストを送信するアヤックスです。

自分のコード（ノード/エクスプレスサーバ）の底部にはない以下： 1）データベース 3）で 2）「request.body」挿入要求を受信したフロントエンドに応答を送信します。

この応答は、request.bodyを含むPromiseです。フロントエンドコードでこの応答を取得するにはどうすればよいですか？ Ajaxはリクエストの送信に役立ちますが、返されるレスポンスの取得については何もしません。

ありがとうございます！

P.S.このデータはもともとフロントエンドから送られてきたものなので、フロントエンドには既にこのデータがあります。しかし、一般的には、リクエストがajaxによって送信されたときにレスポンスを取得する方法を知りたいだけです。

Answer 1

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

XHRを使用すると、ときxhr.readyState == XMLHttpRequest.DONE要求が成功したと言うことができるイベントハンドラonreadystatechangeに、 を持っています。この上

より詳細なドキュメントが

XMLHttpRequestのはかなり便利なAPIですが、それが低すぎるあなたもxhr.statusからのHTTP要求のステータスコードを取得することができますhttps://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState

@役に立つことができますレベルになっていますが、現在はFETCH APIに置き換えられています。これはすばらしいことですが、約束のインターフェイスもサポートしています。つまり、.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