使用 fetch w/react js 访问返回的承诺中的对象

Question

我有这个功能：

  getUserData() {
    fetch(this.props.apiUrl + this.state.username + '?client_Id=' + this.props.clientId + '&client_secret=' + this.props.clientSecret)
      .then(function(response) {
        var data = response.json();
        this.setState({
          userData: data
        });
        console.log(this.state.userData);
      }.bind(this))
      .catch(function(error) {
        this.setState({
          username: null
        });
        console.log(error)
      }.bind(this)) 
  }

控制台中的returns这个：

承诺{[[PromiseStatus]]："pending"，[[PromiseValue]]：未定义}

原型 [[承诺状态]]："resolved"

[[PromiseValue]] : Object
avatar_url : "https://avatars.githubusercontent.com/u/"
login      : "hello world"
.
.
.

我需要访问对象中的 name/value 对，但我无法访问它们。我假设在将响应转换为 json 但无法弄清楚之后我需要采取额外的步骤。如果有人可以提供帮助，将不胜感激！

Answer 1

response.json() returns一个promise，所以你也需要妥善处理，eg:

.then(function(response) {
    return response.json();
})
.then(function(parsedData) {
    // data here
})

Answer 2

这是处理 json 对象的更短方法

fetch(endpoint, request)
.then(response => response.json())
.then(json => {
  //handle json response
}

Answer 3

只需使用等待： response = await response.json(); 并且您将在响应中拥有该对象，确保您必须首先将函数设置为异步 async getUserData(){....} 并在获取之前使用 await。

使用 fetch w/react js 访问返回的承诺中的对象

Accessing object in returned promise using fetch w/ react js

javascript

reactjs

fetch-api