web-dev-qa-db-ja.com

フェッチを使用して応答データにアクセスしようとしています

私は、フェッチAPIを使用して、アプリのフロントエンドからリクエストを行うような簡単なことを試みています

let request = new Request('http://localhost:3000/add', {
    headers: new Headers({
        'Content-Type': 'text/json' 
    }),
    method: 'GET'
});

fetch(request).then((response) => {
    console.log(response);
});

私はサーバーでこのリクエストをそのように処理しています、

app.get('/add', (req, res) => {
    const data = {
        "number1": "2", 
        "number2": "4"
    };
    res.send(data);
});

しかし、フロントエンドconsole.log（response）で自分のデータにアクセスしようとすると、次のオブジェクトが取得されます

Response {type: "basic", url: "http://localhost:3000/add", redirected: false, status: 200, ok: true…}
body:(...)
bodyUsed:false
headers:Headers
ok:true
redirected:false
status:200
statusText:"OK"
type:"basic"
url:"http://localhost:3000/add"
__proto__:Response

レスポンスの本文が空です。それがデータが表示される場所だと思いましたか？サーバーから効果的にデータを渡すにはどうすればよいですか？

javascriptnode.jsfetch-api
9
random_coder_101

このように2つに分割することもできます

async fetchData() {
        let config = {
          headers: {
            'Accept': 'application/json'  //or text/json
          }
        }
        fetch(http://localhost:3000/add`, config)
          .then(res => {
            return res.json();
          }).then(this.setResults);

          //setResults
          setResults(results) {
          this.details = results;

          //or: let details = results

          console.log(details)  (or: this.details)
0
Paul Anthony McGowan