XMLHttpRequestはインスペクタでレスポンスを返しますが、アクセス時にはnullを返します

Question

これで私の頭が崩れました。私は次の機能を持っています：

var submit = (event) => { 
    event.preventDefault(); 
    var xhr = new XMLHttpRequest(); 
    var url = '*removed*'; 
    xhr.open('POST', url, true); 
    xhr.responseType = "json"; 
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
    xhr.send(JSON.stringify({ email: this.state.email, password: this.state.password })); 
    console.log(xhr); 
} 

すべてがうまくいきます。

readyStateの：4

応答：{トークン： "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkI ... DQxfQ.s4Py_lmVK1-Ji9F573ZFddtpdnb2qa1ETHHluG11l44"}

responseType： "JSON"

ステータスこれは、（短い）応答であります：200

STATUSTEXT：私は「RESPONSに含まれるトークンを取得する必要があり、 "OK"

将来の要求のための「e」フィールドを含む。問題は、xhr.responseを呼び出すと "null"と表示されることです。どのようにオブジェクトの単一の要素が返されても、私はそれらにアクセスすることはできません。

私があなたを助けてくれることを願っています。前もって感謝します。

Answer 1

XMLHttpRequestを最後に使用したときに、非同期呼び出しが完了した後にトリガーされるonreadystatechangeイベントを覚えています.HTML呼び出しからの応答にアクセスするためにハンドラーを作成する必要があります。

は、さらに迅速な答えをmozilla docs

submit = (event) => { 
 
    event.preventDefault(); 
 
    var xhr = new XMLHttpRequest(); 
 
    var url = '*removed*'; 
 
    xhr.open('POST', url, true); 
 
    xhr.responseType = "json"; 
 
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
 
    xhr.onreadystatechange = function(){ 
 
    if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { 
 
      console.log(xhr.responseText); 
 
     } 
 
    } 
 
    xhr.send(JSON.stringify({ email: this.state.email, password: this.state.password })); 
 
}