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

我试图从朋克啤酒API中随机获取一瓶啤酒和20瓶啤酒的列表，并将其显示在页面上。然而，出于某种原因，带有随机url的API不断返回相同的啤酒（id:221，名称：Blitz Series）。我很困惑为什么每次重新加载页面时它都不是不同的啤酒。 这是我的密码：

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})


  }));

}

---

在axios请求中添加头：

头：{“Pragma”，“no cache”}

---

这会告诉浏览器每次都进行一个新调用，而不是记住以前的请求。

您正在添加

const root\u api=”https://api.punkapi.com/v2/";

到

axios.get（

${root\u api}/beers/random

）

创建“”

如您所见，在

v2

和

beers

之间有两条斜线

“//”

，这会导致一次又一次地退回相同的啤酒

改为编写

axios.get（

${root\u api}beers/random

）

，问题就会解决

正确格式的完整代码应为：

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

---

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

操作是否返回HTTP 3xx重定向，而不是直接返回

啤酒

实体？如果是这样，则您的

axios

对象的HTTP客户端可能正在缓存重定向，而不是发出全新的请求。如何知道该操作是否返回HTTP 3xx重定向？我不熟悉这个概念。请解释！非常感谢。