Question

我试图为API调用创建一个包装器，我认为我错过了一些东西。承诺将帖子存储在this.post中，但我无法找出返回数据的正确方法。

到目前为止，我已经尝试过这个：

import axios from 'axios';

const CallumAPI = {
  posts: [

  ],
  all: function() {
    axios.get('http://callum.dev/api/posts')
      .then(res => {
        this.posts = res.data.posts;
      })
    return this.posts;
  }
}

export default CallumAPI

在我的包装器中，我试图返回帖子，以便在我的组件中我可以将它们全部列出来。这是组件代码：

<div>
  <ul>
    {
      CallumAPI.all().map(p => (
        <li key={p.id}>
          <Link to={'/post/${p.slug}'}>{p.name}</Link>
        </li>
      ))
    }
  </ul>
</div>

Answer 1

您无法直接访问axios中的数据，因为它始终会返回promise，因此您需要callback function或需要通过{{then访问它1}}一旦数据可用。

以下是您可以做的事情：

更改CallumAPI像这样：

const CallumAPI = {
  posts: [

  ],
  all: function() {
    return axios.get('https://jsonplaceholder.typicode.com/users') // change your api url
      .then(res => {
        this.posts = res.data;
        return this.posts; // return data so we can use
      })
  }
}

和这样的组件：

componentWillMount() {
    CallumAPI.all().then(posts => {
        console.log(posts);
        this.setState({posts}); // set state on data fetch so UI will render 
    });
}

render() {
    const { posts } = this.state;
    return (
        <ul>
        { posts.map(p => (
            <li key={p.id}>
                { p.name }
            </li>
            )) }
        </ul>
    );
}

这是 WORKING DEMO

Answer 2

axios请求是异步调用，即使在解析promise之前，您也要返回数组。此外，您在渲染功能中也不应该有异步请求。您宁愿让它调用一次并存储结果。在async功能中提出componentDidMount请求。

您可以更改all功能以接收callback功能并将响应传递给它。

const CallumAPI = {
  posts: [

  ],
  all: function(cb) {
    axios.get('http://callum.dev/api/posts')
      .then(res => {
        cb(res.data.posts);
      })
  }
}


componentDidMount() {
    CallumAPI.all(this.updateResult);
}

updateResult = (res) => {
    this.setState({res})
}

render() {
<div>
  <ul>
    {
      this.state.res.map(p => (
        <li key={p.id}>
          <Link to={`/post/${p.slug}`}>{p.name}</Link>
        </li>
      ))
    }
  </ul>
</div>
}

使用Axios进行简单的React API请求

2 个答案: