retwrite jquery Ajax call using fetch API

Question

I have the following jquery's ajax call:

 const sendingData = {...}     

 $.ajax({
   url: "/api/data/getuser",
   type: "GET",
   data: sendingData ,
   dataType: 'json',
   ContentType: 'application/json',
   success: (data) => {
     console.log('SUCCESS')
     console.log(data)
     this.setState({
       isFetching: false,
       data: data.user
     })
   },  
   error: (err) => {
     console.log(err)
     this.setState({isFetching: false})
   } 
})

I'm tring to re-write it using fetch. I've tried this:

fetch("/api/data/getuser", {
  method: "GET",
  data: data,
  dataType: 'json',
  ContentType: 'application/json'
}).then((resp) => {
  console.log(resp)
}).catch((err) => {
  console.log(err)
})

The server should give me an object with user and other stuff, but all I get is this object:

Response {type: "basic", url: "http://localhost:3001/api/data/getuser", redirected: false, status: 200, ok: true, …}
body:ReadableStream
locked:(...)
__proto__:Object
bodyUsed:false
headers:Headers {}
ok:true
redirected:false
status:200
statusText:"OK"
type:"basic"
url:"http://localhost:3001/api/data/getuser"
__proto__:Response
}

Maluen · Accepted Answer · 2017-11-19 13:57:53Z

4

You need to use resp.json() to get the response body as parsed JSON.

See https://developer.mozilla.org/en-US/docs/Web/API/Body/json

fetch("/api/data/getuser", {
  method: "GET",
  data: data,
  dataType: 'json',
  ContentType: 'application/json'
})
.then((resp) => {
  return resp.json();
})
.then((user) => {
  console.log(user);
})
.catch((err) => {
  console.log(err)
})

answered Nov 19, 2017 at 13:57

Maluen

1,87113 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

froston · Accepted Answer · 2021-05-12 19:50:33Z

1

Also you are missing headers.

fetch("/api/data/getuser", {
  data: data,
  headers: {
    'Content-Type': 'application/json'
  }
})
.then((resp) => {
  return resp.json();
})
.then((user) => {
  console.log(user);
})
.catch((err) => {
  console.log(err)
})

answered May 12, 2021 at 19:50

froston

1,1971 gold badge13 silver badges26 bronze badges

Collectives™ on Stack Overflow

retwrite jquery Ajax call using fetch API

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related