Question

我正在尝试从Punk Beer API中获取随机啤酒和20种啤酒的列表，并将其显示在页面上。但是由于某种原因，带有随机URL的API总是返回相同的啤酒（id：221，名称：Blitz系列）。我很困惑为什么每次重新加载页面时它都不是不同的啤酒。这是我的代码：

componentDidMount(){
   const root_api = "https://api.punkapi.com/v2/";
 var self = this;

   axios.all([
    axios.get(`${root_api}/beers/random`),
    axios.get(`${root_api}beers?page=2&per_page=20`)

  ])
  .then(axios.spread(function (randomBeerResponse, beerListResponse) {
    self.setState({randomBeer:randomBeerResponse.data[0]})
         self.setState({beers:beerListResponse.data})


  }));

}

Answer 1

您正在将const root_api = "https://api.punkapi.com/v2/";添加到axios.get( $ {root_api} / beers / random )中，从而创建“ https://api.punkapi.com/v2//beers/random”

如您所见，"//"和v2之间有两个斜杠beers，导致一遍又一遍地归还同一啤酒。

改为写入axios.get( $ {root_api}啤酒/随机啤酒)，问题将得到解决。

正确格式的整个代码为：

componentDidMount(){

     const root_api = "https://api.punkapi.com/v2/";
     var self = this;

       axios.all([
        axios.get(`${root_api}beers/random`),
        axios.get(`${root_api}beers?page=2&per_page=20`)

      ])
      .then(axios.spread(function (randomBeerResponse, beerListResponse) {
        self.setState({randomBeer:randomBeerResponse.data[0]})
             self.setState({beers:beerListResponse.data})


      }));

    }

附带说明，在使用API时，应使用Postman之类的API测试/开发工具在程序外部测试API。

这里的问题与React无关。只是API。

Answer 2

在您的axios请求中添加标头：headers: {"Pragma", "no-cache"};

这告诉浏览器每次都打一个新电话，而不记住先前的请求。

每次重新加载页面时如何获得随机啤酒？

2 个答案: