Блог

Я пытаюсь использовать рекурсивную функцию для использования конечной точки, и у меня возникают проблемы с получением моих конечных данных. Если я использую это:

 let b0 = []
const paginatedAPI = (uri, arr) => {
  axios.get(uri)
  .then(resp => {
    //console.log(resp.data.info.next)
    arr = [...arr,...resp.data.results]
    //console.log(arr)
    if(resp.data.info.next){
      paginatedAPI(resp.data.info.next,arr)
    }
    return arr
  })
  .catch(error => console.log(error))
  return arr
}

b0 = paginatedAPI('https://rickandmortyapi.com/api/character',b0)
  

и раскомментируйте операторы ведения журнала, очевидно, что массив заполняется правильно, но, конечно, он пуст, когда я оцениваю его в инструментах разработки. Я
сначала предпринял попытку запуска с этим кодом, который работает нормально, но кажется неправильным:

 axios.get('https://rickandmortyapi.com/api/character')
.then(response => {
  console.log(response)
  let numPages = response.data.info.pages
  a0 = [...response.data.results]
  for(let i = 2;i <= numPages;i  ){
    axios.get(`https://rickandmortyapi.com/api/character?page=${i}`)
    .then(resp => populateDropDown(a0 = [...a0,...resp.data.results]))
  }
})
.catch(data => {
  const htmlStr = '<div class="text-danger">We're sorry, but an unexpected error occurred</div>';
  $('.container').append(htmlStr);
});
  

Я пытался найти в Google решение, которое является простым, но пока безуспешно. Спасибо.

После дальнейших исследований и изучения Promises и async / await я все еще чувствовал, что мне просто нужно где-то захватить данные, поэтому я, наконец, попробовал это:

 let b0 = []

const paginatedAPI = (uri, arr) => {
   axios.get(uri)
  .then(resp => {
    arr = [...arr,...resp.data.results]
    if(resp.data.info.next){
      paginatedAPI(resp.data.info.next,arr)
    }
    b0 = arr
  })
  .catch(error => console.log(error))
}

paginatedAPI('https://rickandmortyapi.com/api/character',b0)
  

И это работает! Спасибо