使用 fetch API 重写 jquery Ajax 调用

Question

我有以下jquery的ajax调用：

 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})
   } 
})

我正在尝试使用

fetch

重写它。 我试过这个：

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

服务器应该给我一个包含用户和其他内容的对象，但我得到的只是这个对象：

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
}

Answer 1

您需要使用

resp.json()

来获取已解析 JSON 形式的响应正文。

参见 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)
})

Answer 2

您还缺少标题。

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)
})