Блог

Главная - Вопросы по программированию - Как уничтожить объекты из API?

Как уничтожить объекты из API?

#reactjs #axios

#reactjs #axios

Вопрос:

Я вызываю API из (https://reqres.in/api/users ), можем ли мы преобразовать этот 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"
    }
  ]
}

Комментарии:

1. Не совсем понятно, о чем вы спрашиваете. Вы имеете в виду, как вы можете получить data массив в отдельной переменной? const { data } = response;

2. чего вы пытаетесь достичь? Вопрос не ясен codepen, упомянутый в вопросе, показывает, что все работает нормально

3. Я хочу, чтобы на одной странице отображались все 12 данных.

Ответ №1:

Здесь вам нужно будет выполнить несколько вызовов API, все на основе предыдущего вызова. Это в значительной степени пример для 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, но это можно изменить, отсортировав состояние по желанию.

Вы можете увидеть, как это работает в CodePen здесь .