-1

Estou tentando criar um front-end com base na API do star wars, meu plano era criar um objeto para então mostrar na tela. Quando faço uma requisição(https://swapi.co/films por exemplo),algumas propriedades do objeto vem como um array de links. Então pensei em chamar função dentro da requisição para fazer outras requisições usando o AXIOS, porem quando retorno os dados, eles voltam todos juntos.Como posso fazer que as propriedades dos objetos recebam os dados corretamente?

Meu código segue abaixo:

const urlAPI = 'https://swapi.co/api/'


async function getInformation(arrayURL) {

    arrayData = []
    promisses = []
    arrayURL.forEach(element => {
        console.log(element)
        const promisse = axios(element)
            .then(response => response)
            .then(resp => arrayData.push(resp.name))
        promisses.push(promisse)
    })
    axios.all(promisses)
    console.log(arrayData)
    return await arrayData;

}


axios.get(`${urlAPI}films`)
    .then(response => {
        return (response.data.results)
    })
    .then(resp => {
        // console.log(resp)
        resp.forEach(element => {
            if (element.hasOwnProperty('planets')) {
                element.planets = getInformation(element.planets)
                console.log(element.planets)
            }


        })

    })
    .then(data => {
        console.log(data)
    })
    .catch(error => {
        console.log(error)
    })

Em cada console.log ele deveria mostrar os nomes dos planetas, mas mostra apenas na ultima chamada e ainda fora de ordem

3
  • Como assim "voltam todos juntos"? Pode dar um exemplo?
    – Sam
    Commented 14/02/2020 às 0:50
  • Pelo código, cada conjunto de requisições que chamo através da função getInformation devia devolver os valores ao 'element.planets' de cada 'element', no entanto ele só devolve ao ultimo 'element' e todos juntos e de maneira desorganizada.
    – Carlos
    Commented 14/02/2020 às 1:05
  • Em cada console.log, deveria estar mostrando os nomes dos planetas que chamei da função getInformation, mas ele mostra vazio. Só no ultimo que ele mostra.
    – Carlos
    Commented 14/02/2020 às 1:10

1 Resposta 1

0

Tem muitos erros a respeito do tratamento de assincronismo nesse código, tanto que fica até difícil descrever todo o fluxo do código para explicar como ele chegou nesse resultado final.

Um erro notável está aqui:

element.planets = getInformation(element.planets)

getInformation é uma função assíncrona, ela vai te retornar uma Promise, não um array de planetas, mas em nenhum ponto você espera pela resolução dessa promise.

A implementação da função getInformation também está confusa, você popula um array promisse com todas as suas requisições, depois usa axios.all(promisses) para esperar a resolução das promises, mas não usa nem await, nem then(), ou seja, não espera de fato pela resolução, e então finalmente você faz await arrayData. Por quê? Eu não sei o que você imaginou, mas utilizar await num array não tem efeito nenhum.

A sua ideia no entanto parece estar correta, se entendi corretamente. Vou tentar adaptar o código utilizando fetch para maior acessibilidade aqui no site, a única diferença é que você usará axios.get(url) ao invés de fetch(url).then(r => r.json())

const urlAPI = 'https://swapi.co/api/'

function getInformation(arrayURL) {
  // Com o método map, gero um array de promises que correspondem as requisições
  // Essa função não precisa ser assíncrona, pois não precisamos dos dados das
  // requisições aqui, e portanto não precisamos esperar pela resolução
  const arrayPromise = arrayURL.map(url => fetch(url).then(r => r.json()))
  return Promise.all(arrayPromise)
}

async function fetchData() {
  const response = await fetch(`${urlAPI}films`).then(r => r.json())
  
  // Primeiro loop, faço todas as requisições, mas não espero por suas resoluções
  // dessa forma não preciso esperar pela primeira requisição acabar antes de começar a próxima
  for (const result of response.results) {
    result.planets = getInformation(result.planets)
  }

  // Agora que todas as requisições já foram enviadas, posso esperar pela resolução uma a uma
  for (const result of response.results) {
    result.planets = await result.planets
  }

  console.log(response)
}

fetchData()

Esse código requer um esforço adicional para optimizar o tempo de resposta. Você poderia apenas fazer uma requisição de cada vez e esperar pela resposta, seria mais simples, mas devido a quantidade de requisições nesse código, isso atrapalharia a experiência do usuário.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .