Na aula 3 é feita a demonstração do consumo de uma API utilizada no curso React parte 2 e 3. No vídeo de demonstração tudo funcionou perfeitamente, contudo seguindo o vídeo não obtive o mesmo resultado.
Na aula 3 é feita a demonstração do consumo de uma API utilizada no curso React parte 2 e 3. No vídeo de demonstração tudo funcionou perfeitamente, contudo seguindo o vídeo não obtive o mesmo resultado.
A demonstração de consumo da API foi feita na plataforma da Apple, o que explica o motivo de o problema não ter ocorrido. No Android o emulador possui restrição no uso de networking, possuindo, assim, um isolamento da máquina de desenvolvimento ( * ). Para operar normalmente precisa-se utilizar um endereço de rede específico fornecido pela plataforma. O mesmo resultado positivo exibido no vídeo pode ser alcançado ao substituir o termo localhost por 10.0.2.2. O código de consumo da API fica assim:
fetch('http://10.0.2.2:8080/api/public/fotos/rafael')
.then(resposta => resposta.json())
.then(json => {
this.setState({fotos: json});
})
.catch(e => {
console.warn('Não foi possível carregar as fotos');
this.setState({status: 'ERRO'});
});
( * ) Lembrando que para APIs em máquinas remotas (não hospedadas localmente, localhost) a restrição não existe.
Set up Android Emulator networking, https://developer.android.com/studio/run/emulator-networking.