如何进行有限的axios请求？答案

【问题标题】：How to make a limited axios request?如何进行有限的axios请求？
【发布时间】：2020-09-02 19:37:08
【问题描述】：

有人可以帮我解决这个问题吗？

我有一个运行良好的代码，它显示了所有火型口袋妖怪的列表、名称和图像。它显示了所有火系口袋妖怪（或多或少 100 个口袋妖怪），但我只想请求前 10 个，这是一种方法吗？（我曾尝试将“params:_limit:10”放在 axios.get 函数中，但没有用。

export default class PokemonList extends Component {
state= {
    url: 'https://pokeapi.co/api/v2/type/fire',
    pokedata: null
};
async componentDidMount() {
    const res = await axios.get(this.state.url);
    this.setState({ pokedata: res.data['pokemon'] })

}
render() {
    return (
        <PanelArea>
            {this.state.pokedata ? (
        <div className='row'>
            {this.state.pokedata.map(pokedata => 
                <PokemonCard
                    key={pokedata.pokemon.name}
                    name={pokedata.pokemon.name}
                    url={pokedata.pokemon.url}
                />
                )}
        </div>
    ) : (
        <h1> Carregando Pokemon </h1>
    )}
    </PanelArea>
)};

}

【问题讨论】：

后端的 API 应该支持分页（即页面大小或数据大小/限制）。
pokeapi 文档说：使用这个 - https://pokeapi.co/api/v2/evolution-chain/?limit=20&offset=20 进行分页。
我尝试了“url:'pokeapi.co/api/v2/type/fire?limit=10&offset=10'”但仍然在页面上显示所有火精灵，当我将 pokemon.data 放入“res”时它接收所有数据，而不是前 10 个
一个类似的answer在前端做分页。

标签： reactjs api get request axios

【解决方案1】：

您想要实现的只是 API 级别的更改。

pokemon API 也有一个限制参数，可用于设置请求项目的限制。我可能会建议尝试使用它。

如果由于某种原因无法正常工作，您可以在客户端代码中使用一种解决方法来获取宠物小精灵数据。

假设您在一个数组中返回了 100 个项目。在使用此值设置本地状态之前，您可以过滤传入的结果并确保您只接受前 10 个或最后 10 个或任何您的实现。

更新更多细节：

传入的响应是一个对象，它有一个名为 pokemon 的键，这是一个数组。您需要做的就是在使用 pokemon 数据设置本地状态之前，让包装函数进行某些操作。

function mapPokemonData = (data) => {
  // let's assume you always need only ten items and that the API is 
  // always going to return you data more than 10
  let updatedData = [];
  if(data.length >= 10) {
    updatedData = [...data].splice(0, 10)
  } else {
    updatedData = [...data]
  }
  return updatedData
}

现在您可以从该函数中获取返回值，然后设置本地状态值。

【讨论】：

没错！关于如何过滤前 10 个输入结果的任何提示？
@darthrevan93 我已经用一个可能的包装函数更新了我的答案，以实现你正在寻找的东西。

【解决方案2】：

我发现了一种对我有用的方法，我只是在 res.data 请求之后添加了 .slice(0,10) 并且效果很好！

 async componentDidMount() {
    const res = await axios.get(this.state.url);
    this.setState({ pokedata: res.data['pokemon'].slice(1,10) })


}

【讨论】：