3
respostas

Buscando foto selecionada na API

Quando entra no componente.html de PhotoDetails, ele consegue mostrar a foto , mas primeiro realiza uma requisição, onde mostra no console "http://localhost:3000/imgs/null 404 (Not Found)" Mas mesmo assim a imagem consegue carregar. Que tipo de erro seria esse? Já que a foto consegue ser exibida, é como se ele primeiro fizesse uma requisição que não encontrasse nada nem id, e ai sim depois que tem o id ele mostrasse a foto.

3 respostas

Fala aí Nilton, tudo bem? Bom, precisaria ver os códigos e entender melhor o que você está fazendo nos componentes e serviços.

Falando assim por cima é complicado.

Provavelmente você está esperando receber algum parâmetro para realizar a request, porém, o mesmo não é passado.

Espero ter ajudado.

O problema foi solucionando adotando o Observable. Mas tenho uma dúvida, quando adotar realmente o Observable? Quando é necessário fazer por exemplo um

_photo = Observable<Photo>

fez-se isso no compent e no template usou ' | assync '.

Nos capítulos anteriores, na construção do footer, vi que no componente ele também usou o Observable em user para retornar o usuário e fazer o ' | async ' no ng if do template, para exibir o footer caso o usuario estivesse logado.

E aproveitando o post para realizar outra pergunta e sanar minha dúvida é em relação ao upload de imagem. Ficou meio implícito pra mim como ele relaciona a foto e os componentes (description e allowcomments) com o usuário que fez o envio. No component ele apenas faz um post dos dados do formulário, sem informar explicitamente onde ele 'linkaria' por exemplo "Ah essa foto é desse usuário que estar enviando" .

Abri a API Node e vi que lá existe um método que faz o envio da foto recebendo um "req". Acredito que ai ele faça a combinação foto com o usuário que está logado, mas como no meu front end faz essa comunicação ? Através do token logado ?

api.addUpload = async (req, res) => {

        console.log('upload complete');
        console.log('Photo data', req.body);
        console.log('File info', req.file);

        const image = await jimp.read(req.file.path);

        await image
            .exifRotate()
            .cover(460, 460)
            .autocrop()
            .write(req.file.path);  

        const photo = req.body;
        photo.url = path.basename(req.file.path);
        await new PhotoDao(req.db).add(photo, req.user.id);
        res.status(200).end();       
};

Fala aí Nilton, tudo bom? Geralmente definimos uma propriedade (atributo) da classe como Observable quanto queremos que o Angular seja o responsável por sua renderização assim que o mesmo for resolvido e finalizado.

Isso é feito através do async pipe, ele consegue lidar com Observable's e os renderiza quando estiverem disponíveis.

Do contrário você não ia ter essa possibilidade de usar o async.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software