如何从API中构造对象？

Question

我从（https://reqres.in/api/users）调用API，我们可以将这个API解构为单个对象数组。这样我就可以自定义API中修复的每页。

This is Codepen link https://codepen.io/monukr14/pen/oOWpyq



Initial API Format

{
  "page": 1,
  "per_page": 3,
  "total": 12,
  "total_pages": 4,
  "data": [
    {
      "id": 1,
      "first_name": "George",
      "last_name": "Bluth",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
    },
    {
      "id": 2,
      "first_name": "Janet",
      "last_name": "Weaver",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
    },
    {
      "id": 3,
      "first_name": "Emma",
      "last_name": "Wong",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"
    }
  ]
}

Answer 1

在这里，您将不得不进行多次API调用，所有这些都基于之前的调用。 This is pretty much the example case for async await.

// default start at page #1
async function makeRequest(page = 1) {
    const url = `https://reqres.in/api/users?page=${page}`
    const response = await axios.get(url);

    const { total_pages: totalPages, data } = response.data;

    const isLastPage = totalPages <= page;
    if (isLastPage) {
        return data; // if last page, just return this data
    }

    const next = await makeRequest(page + 1); // make request for next page
    return [...next, ...data] // return both sets of data
}

这是一个处理请求发出的函数。如果有更多页面，它会递归调用API。

然后我们可以在你的componentDidMount方法中很好地处理它。

componentDidMount() {
  makeRequest()
    .then(repos => this.setState({ repos }))
    .catch(error => console.log(error));
}

===编辑===

第二个想法，我想更新我以前的答案，因为它不可扩展。它显示了所有请求完成后的所有用户 - 在4页不明显，但在大量页面上会出现问题。

async function makeRequest(page = 1) {
  const url = `https://reqres.in/api/users?page=${page}`;
  const response = await axios.get(url);

  const { total_pages: totalPages, data } = response.data;

  return { totalPages, repos: data };
}

class Repos extends React.Component {
  state = {
    repos: []
  };

  async componentDidMount() {
    this.loadPages();
  }

  async loadPages() {
    const totalPages = await this.loadPage(1); // make first request

    const nextPage = 2;
    for (let i = nextPage; i <= totalPages; i++) { // make every request separately
      this.loadPage(i);
    }
  }

  async loadPage(page = 1) {
    const { totalPages, repos } = await makeRequest(page);
    this.addRepos(repos);

    return totalPages;
  }

  addRepos(repos) {
    this.setState(prevState => ({
      repos: [...repos, ...prevState.repos] // add to array, not override
    }));
  }
....
}

我更新的代码单独生成每个请求并附加到状态（而不是覆盖它）。这意味着它可以独立发出请求，并在每个请求完成后立即添加用户。

它确实意味着订单不一定与API匹配，但可以通过根据需要对状态进行排序来进行更改。

You can see it working on CodePen here.