Как сделать запрос API с помощью axios? - PullRequest
Новая
       14

Как сделать запрос API с помощью axios?

0 голосов
/ 09 апреля 2019

Я новичок в реакции и у меня следующие проблемы:

Я использую API, который содержит более 60 символов, моя проблема в том, что я хочу, чтобы все символы моего API отображались без необходимости вручную добавлять каждое число. ({This.state.people [0] .name}, ..., {this.state.people [n] .name}).

Эта проблема также заставила меня сделать вызов API два раза, потому что API выдает только 10 результатов за вызов. они следующие за страницей 2.

Я создал новый вызов с? = Page2, но это очень утомительный способ сделать это, потому что мне нужно было бы добавить 10 различных вызовов API, чтобы добавить все символы. Я думал о том, чтобы сделать цикл for, но я действительно не знаю, как подойти к этому. 

class Api extends Component {

state ={
    people:[
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    ],

    people2:[
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    ]
}

componentDidMount() {
  axios.get('https://swapi.co/api/people/')

  .then(starwars => {
    this.setState({
        people: starwars.data.results
    })
    console.log(starwars.data.results)

  })
axios.get('https://swapi.co/api/people/?page=2')
  .then(starwars2 => {
    this.setState({
        people2: starwars2.data.results
    })
    console.log(starwars2.data.results)

  })
  .catch(error => {
    console.log(error);
  });
}

  render(){
    return ( 

        <div>
        <Cards title={this.state.people[0].name} />
        <Cards title={this.state.people[1].name} />
        <Cards title={this.state.people[2].name} />
        <Cards title={this.state.people[3].name} />
        <Cards title={this.state.people[4].name} />
        <Cards title={this.state.people[5].name} />
        <Cards title={this.state.people[6].name} />
        <Cards title={this.state.people[7].name} />
        <Cards title={this.state.people[8].name} />
        <Cards title={this.state.people[9].name}  />
        <Cards title={this.state.people2[0].name}  />
        <Cards title={this.state.people2[1].name}  />
        <Cards title={this.state.people2[2].name}  />
        <Cards title={this.state.people2[3].name}  />
        <Cards title={this.state.people2[4].name}  />
        <Cards title={this.state.people2[5].name}  />
        <Cards title={this.state.people2[6].name}  />
        <Cards title={this.state.people2[7].name}  />
        <Cards title={this.state.people2[8].name}  />
        <Cards title={this.state.people2[9].name}  />

</div>)
  }
}
export default Api;

Выполните вызов API для 60 символов за один вызов.

1 Ответ

3 голосов
/ 09 апреля 2019

Как вы сказали, вы можете программно пройтись по циклу и получить всех людей . Для этого вам нужно знать, сколько там страниц. Запрос на https://swapi.co/api/people/ возвращает count как часть ответа. Предполагая, что это общее количество людей, вы можете использовать его для подсчета количества страниц, которые нужно запросить. Это будет выглядеть примерно так:

Примечание: для этого я использовал Node, просто добавьте необходимые биты React. 

const axios = require("axios");
// first page
axios("https://swapi.co/api/people/")
    .then(starwars => {
        return starwars.data.count;
    })
    .then(count => {
        // exclude the first request
        const numberOfPagesLeft = Math.ceil((count - 1) / 10);
        let promises = [];
        // start at 2 as you already queried the first page
        for (let i = 2; i <= numberOfPagesLeft; i++) {
            promises.push(axios(`https://swapi.co/api/people?page=${i}`));
        }
        return Promise.all(promises);
    })
    .then(response => {
        // collect all results into one array
        const result = response.reduce((acc, data) => [...acc, ...data.data.results], []);
        return result;
        //result should contain the remaining records - pages 2 through n.
    })
    .catch(error => console.log("Properly handle your exception here"));

Как всегда, помните о быстром сбое 1011 * Promise.all

...