Api 反应&x2014；使用Fetch请求数据

我试图使用Fetch从API获取一些数据，但没有成功。由于某些原因，请求失败，我无法呈现数据。。。由于我对反应和提取非常陌生，我不确定错误在哪里。这与我请求API的方式有关吗

先谢谢你

class App extends React.Component {
  render() {
    return <Data />
  }
}


class Data extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      requestFailed: false,
    }
  }

  componentDidMount() { // Executes after mouting
    fetch('https://randomuser.me/api/')
      .then(response => {
        if (!request.ok) {
          throw Error("Network request failed.")
        }
        return response
      })
      .then(d => d.json())
      .then(d => {
        this.setState({
          data: d
      })
    }, () => {
      this.setState({
        requestFailed: true
      })
    })
  }


  render() {

    if(this.state.requestFailed) return <p>Request failed.</p>
    if(!this.state.data) return <p>Loading</p>

    return (
      <h1>{this.state.data.results[0].gender}</h1>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

类应用程序扩展了React.Component{
render（）{
返回
}
}
类数据扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
请求失败：false，
}
}
componentDidMount（）{//在安装后执行
取（'https://randomuser.me/api/')
。然后（响应=>{
如果（！request.ok）{
抛出错误（“网络请求失败”）
}
返回响应
})
.then（d=>d.json（））
.然后（d=>{
这是我的国家({
数据：d
})
}, () => {
这是我的国家({
请求失败：true
})
})
}
render（）{
if（this.state.requestFailed）返回请求失败

如果（！this.state.data）返回加载

返回(
{this.state.data.results[0].gender}
);
}
}
ReactDOM.render（
fetch方法应为

fetch('your_url')
  .then (  
  response => {  
    if (response.status !== 200) {   
      return 'Error. Status Code: ' +  response.status   
    }
    response.json().then(result => console.log(result)) // do sth with data 
  }  
)
  .catch(function(err) {  
  console.log('Opps Error', err)  
})

获取方法应为

fetch('your_url')
  .then (  
  response => {  
    if (response.status !== 200) {   
      return 'Error. Status Code: ' +  response.status   
    }
    response.json().then(result => console.log(result)) // do sth with data 
  }  
)
  .catch(function(err) {  
  console.log('Opps Error', err)  
})

我认为你的问题在于

.then(response => {
    if (!request.ok) {
      throw Error("Network request failed.")
    }
    return response
  })

没有具有属性ok的请求对象。您可能想检查响应。ok

.then(response => {
    if (!response.ok) {
      throw Error("Network request failed.")
    }
    return response
  })

我认为你的问题在于

.then(response => {
    if (!request.ok) {
      throw Error("Network request failed.")
    }
    return response
  })

没有具有属性ok的请求对象。您可能想检查响应。ok

.then(response => {
    if (!response.ok) {
      throw Error("Network request failed.")
    }
    return response
  })

如上所述，您可以像

fetch('https://randomuser.me/api/')
  .then((response) => {
    return response.json()
  }).then((d) =>  {
    console.log('parsed json', d)
    this.setState({
          data: d
    });
  }).catch(function(ex) {
    console.log('parsing failed', ex)
    this.setState({
        requestFailed: true
      })
  })

如上所述，您可以像

fetch('https://randomuser.me/api/')
  .then((response) => {
    return response.json()
  }).then((d) =>  {
    console.log('parsed json', d)
    this.setState({
          data: d
    });
  }).catch(function(ex) {
    console.log('parsing failed', ex)
    this.setState({
        requestFailed: true
      })
  })

您能确定提取失败吗？您应该添加一个.catch（）来获取错误。例如
提取（'https://randomuser.me/api/然后（response=>{if（！request.ok）{throw Error（“网络请求失败”）}返回response}.catch（（Error）=>{console.log（Error）；}）
您能确定提取失败吗？您应该添加一个.catch（）来获取错误。例如，
fetch（'https://randomuser.me/api/然后（response=>{if（！request.ok）{throw Error（“网络请求失败”）}返回response}.catch（（Error）=>{console.log（Error）；}）
感谢Shubham提供的解决方案和链接。我刚刚意识到我正在查看不同的文档。没问题，很乐意帮助：）感谢Shubham提供的解决方案和链接。我刚刚意识到我正在查看不同的文档。没问题，很乐意帮助：）谢谢你的帮助。谢谢你的帮助。谢谢你的帮助。np mate，我发布了这个简单的片段，让你可以轻松定义“结果”的来源，你可以用它做任何事情，控制台注销这些数据是我过去使用的方便方式。感谢您的帮助。np mate，我发布了这个简单的代码片段，让您可以轻松定义“结果”的来源，您可以用它做任何事情，控制台注销这些数据是我过去使用的方便方式。