Question

我在笔记本电脑上做了一个假服务器来获取数据。这是其中的数据：

[
  {
    "id": 1,
    "firstName": "Bill",
    "lastName": "Gates",
    "email": "bill@microsoft.com",
    "phone": "1234567898",
    "role": "Accountant",
    "org": "Organization 1"
  },
 {
    "id": 2,
   "firstName": "Mark",
   "lastName": "Zuckerberg",
   "email": "mark@facebook.com",
   "phone": "9876543212",
   "role": "Admin",
   "org": "Organization 1"
  }
]

我使用npm run mock：api运行服务器

我想从中获取数据并显示在我的物理android设备（电话）中。这是我尝试的代码：

constructor(props) {
    super(props);

    this.state = {
        users_fake: []
    }
}

componentDidMount() {

    fetch("https://192.168.43.164:4000/users")
    .then(response => response.json())
    .then((responseJson)=> {
        console.log('Response = ' + responseJson);
        this.setState({
            loading: false,
            users_fake: responseJson
        })
    })
    .catch(error=>console.log(error))

这：

  fetch("http://localhost:4000/users")
        .then(response => response.json())
        .then((responseJson)=> {
        this.setState({
        loading: false,
        users_fake: responseJson
        })
        })
        .catch(error=>console.log(error))

这：

 fetch('http://localhost:4000/users', {
            method: 'GET'
         })
         .then((response) => response.json())
         .then((responseJson) => {
            console.log(responseJson);
            this.setState({
               users_fake: responseJson
            })
         })
         .catch((error) => {
            console.error(error);
         });

}

我这样显示数据：

 { this.state.users_fake.map((user, index) => { 
     return (
         <Text>{user.firstName} {user.lastName}</Text>
     )
 })}

但是我在控制台中遇到错误：

WARN  Possible Unhandled Promise Rejection (id: 16):
TypeError: Network request failed

我应该怎么做才能获取数据并显示它？

Answer 1

在catch函数中添加抛出错误

fetch("https://192.168.43.164:4000/users")
    .then(response => response.json())
    .then((responseJson)=> {
        console.log('Response = ' + responseJson);
        this.setState({
            loading: false,
            users_fake: responseJson
        })
    })
    .catch(error=>{console.log(error);
throw error;})

希望这会有所帮助！

如何在React Native中从假服务器获取数据？

1 个答案: