Question

当我从我的react应用程序使用axios执行REST调用（获取）时，它说响应是不确定的。但是，当我尝试在Postman中进行相同的呼叫时，显然可以给出正确的响应。 React无法获得正确的响应。我该如何解决这个问题？

Response给出“未定义”，response.data也给出“未定义”。

class Blogpost extends React. Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    };
  }

componentDidMount() {
const response = axios.get({
      URL: 'http://178.62.198.162/api/posts',
      headers: {'token' : 'pj11daaQRz7zUIH56B9Z'}
    })
    const items = response.data;
    this.setState({
      isLoaded: false,
      items: items,
    });
    console.log(this.items);
  }

render() {
    const {error, isLoaded, items } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <ul>
          {this.items.map(item => (
            <li key={item.name}>
            {item.name}
            </li>
          ))}
        </ul>
      );
    }
  }
}

预期结果将是一个集合数组。但是实际上它是“未定义”的。

如何使它起作用，以便响应给出正确的数组？

编辑 GET请求似乎有问题。该承诺被失败代码404拒绝。

componentDidMount() {
const response = axios.get({
  URL: 'http://178.62.198.162/api/posts',
  headers: {'token' : 'pj11daaQRz7zUIH56B9Z'}
})
response.catch((error) => {
  console.log(error)
});

}

这是服务器端还是客户端上的问题，该如何解决？

Answer 1

您使用axios的方式错误。 Axios始终返回Promise对象。

将代码更改为关注代码，它将起作用。

componentDidMount() {
const response = axios.get({
      URL: 'http://178.62.198.162/api/posts',
      headers: {'token' : 'pj11daaQRz7zUIH56B9Z'}
    })
    response.then((res) => {
      const items = res.data;
      this.setState({
        isLoaded: false,
        items: items,
      });
      console.log(this.items);
    }
})

  }

您可以在此处阅读有关承诺的更多信息 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Answer 2

您应该使用async / await语法来确保在初始化之前，响应变量将被正确的http get响应填充

async componentDidMount() { 
  const response = await axios.get({
    URL: 'http://178.62.198.162/api/posts',
    headers: {'token' : 'pj11daaQRz7zUIH56B9Z'}
  })
  const items = response.data;
  this.setState({
  isLoaded: false,
  items: items,
});
}

React js无法正确解释axios调用，数据未定义

2 个答案: