Как получить случайное пиво каждый раз, когда я перезагружаю страницу?

Question

Я пытаюсь получить случайное пиво и список из 20 сортов пива из Punk Beer API и отобразить его на странице.Однако по какой-то причине API со случайным URL продолжал возвращать одно и то же пиво (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})


  }));

}

Answer 1

Вы добавляете const root_api = "https://api.punkapi.com/v2/"; к axios.get( $ {root_api} / beers / random ), что создает "https://api.punkapi.com/v2//beers/random"

Как видите, между * 1008 есть две косые черты "//"* и beers, и это приводит к тому, что одно и то же пиво возвращается снова и снова.

Вместо этого напишите axios.get( $ {root_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, вы должны протестировать API вне вашей программы с помощью инструмента тестирования / разработки API, такого какПочтальон.

Проблема здесь не имеет ничего общего с React. Это просто API.

Answer 2

Добавьте заголовок в вашем запросе axios: headers: {"Pragma", "no-cache"};

Это говорит браузеру, чтобы каждый раз совершать новый вызов и не запоминать предыдущий запрос.