Summary

Resumo do Transcript

No vídeo, o narrador aborda o processo de manipulação de objetos JavaScript na comunicação com um servidor que apenas aceita JSON. A seguir, ele explica alguns pontos importantes sobre o uso de this e bind, destacando que a função flash já ajusta o contexto da palavra-chave this, eliminando a necessidade de utilizar bind.

Principais Pontos Abordados:

Uso de JSON: O narrador menciona que, ao enviar um objeto JavaScript ao servidor, é necessário convertê-lo para JSON usando JSON.stringify.
Manipulação de this: Ele explica que, ao utilizar a função flash, não é preciso usar bind para definir o contexto de this.
Requisições ao Servidor: O narrador mostra como realizar requisições PATCH e DELETE, observando que ao fazer uma requisição PATCH é importante passar o corpo da requisição em formato JSON. Ele também demonstra como lidar com a resposta do servidor.
Atualização de Estado: Ele fala sobre a limpeza dos estados dos campos de formulário após uma operação de DELETE e a maneira de capturar a resposta de sucesso.
Erro no Reload: O narrador comenta sobre um erro que ocorreu devido ao Live Reload da aplicação e como desativá-lo.
Operações CRUD: O vídeo conclui ressaltando que aprendeu a realizar operações CRUD (Create, Read, Update, Delete) e menciona que nos vídeos seguintes irá abordar tópicos mais avançados.

Exemplos de Código

Requisição PATCH para atualizar um perfil:

// Método PATCH para atualizar um perfil
fetch(url, {
    method: 'PATCH',
    body: JSON.stringify(data),
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.then(data => console.log(data));

Requisição DELETE para excluir um perfil:

// Método DELETE para remover um perfil
fetch(url, {
    method: 'DELETE',
})
.then(response => response.json())
.then(data => {
    setState({ nome: '', idade: null, avatarUrl: null });
});

Conclusão

O narrador agradece e convida os espectadores a deixar comentários e sugestões, finalizando com uma breve menção às operações CRUD e ao que será abordado nos próximos vídeos.

Nota: Para aqueles que seguem essa série, é importante entender os conceitos básicos antes de prosseguir para as funcionalidades mais avançadas em desenvolvimento web.

Video Transcript

Eu esqueci de uma coisa aqui no buddy. Então a gente está mandando esse objeto JavaScript para o servidor. Mas o servidor só aceita JSON, né? A gente está fazendo JSON. Então a gente esqueceu de stringify. Esse objeto para transformar o objeto JavaScript em texto, em formato JSON. Então vamos tentar novamente. Vamos mudar para tu... 28, está aí. Vamos aqui a dar a base. Clicar editar. Está aí. Seu nome, né? 28. Agora vamos voltar aqui para... Ah, cadê? Você note aqui que nesse caso eu botei... ...this, eu usei this, this, this. Lembra antes que a gente tem que fazer o bind, né? Cada vez que a gente tinha usado this, this, this, não é aqui, ó. Eu acho que esse botou bind, em criar a pessoa, né? Mas por que a gente não precisou de fazer isso aqui? Quando eu queira editar. Note que eu estou usando a função de flash. A função de flash já seta o contexto da palavra this para ser não desses caras aqui, mas para o componente. O segundo projeto, né? Cadê esse componente? Então, se você usar a função de flash, não precisa botar o bind, this, tá bom? Só um detalhe, por isso que eu deixei assim. Nesse caso aqui, eu vou fazer esse outro aqui depois, mas sem a função de flash, eu vou estar... ...deleta, perfil, bind, this, tá bom? Só comparando os dois. Mas vamos voltar aqui. Então... É porque a gente está dando erro porque eu não defini. Só defini aqui, dela tá perfil. Tá bom? Editar, dela tá perfil, botar nada. Ainda. Tá bom? Só para definir, tá sem erro. Então, o que eu quero fazer agora é... Vamos ver o que a gente quer... ...que é que é retornado o servidor quando a gente faz esse pedido aqui. Se lembra que o FAT sempre retora o promessa, né? Promise. Então, promessa a gente pode botar o then e vai ter um response, né? Vamos consolar, Giz. O que é que essa é a response? Vai ser um promise, né? Vamos ver o que acontece. Vou botar aqui... Clicar, editar... Aí. Então, minha resposta foi a response, né? Isso aqui, né? Eu gosto aqui. Então, o que é que tem aqui? Tem o URL, essas coisas. Headers, Map. Mas depois disso, a gente tem que fazer... Isso aqui, né? Lembra? E outro then. Vamos consolar o que é que é isso? Ela já tem ali, né? Ah, que é isso, né? Me botei isso. Que 29, editar. Só um editar... Ah! Tá dando reload aqui. Ah, que é isso. Preserve logo. Vou clicar aqui para não dela estar. Eu nem cliquei, está dando bugs aqui. 30 aí. Tá bom? Então, o que aconteceu aqui, ó? A gente recebeu esse objeto aqui. De volta. Então, João, idade 30. Então, o nosso JSON server aqui... retorna... Quando a gente faz a patch, retorna o objeto. Tá bom? E... Esse aqui converte o resposta para o objeto JavaScript. A gente tem um console logo, só para ver o que é. Se você quiser fazer alguma coisa com a resposta, pode fazer aqui. Tá bom? Então... Vamos ver como é que faz o delete. Ela é tarpe, fio aqui. Quando a gente clica dela, queremos dela até esse cara. Vamos fazer patch, né? Põe a URL. Quando a gente faz o delete, tem que ter a pessoa, o ID da pessoa também. Específico, né? Vamos botar... Objeto method delete. Assim, né? Vamos ver se funciona só assim. E eu quero fazer um anden aqui para lidar com essa promessa, só para ver o que é que eu obtenho com a resposta, né? Nem preciso de parênteses aqui, né? Mas eu vou por... Vamos com o console logo também, só para ver o que é. Então... Quando a gente clica, vai dar o delete. Também quero fazer outra coisa aqui, quando a gente recebe a resposta de sucesso, né? Eu quero também deletar todos esses campos aqui e tirar essa foto. Então vamos fazer um set state. D, set state, né? Nome vai ser nada, vazio, idade. Sei lá, vazio também ou no. Vamos botar no, né? E vamos por avatar URL... Botar no. Para ver, acho que estava dando erro porque eu tinha... Sempre dá o mensagem de erro porque eu botei avatar URL para ser vazio, botar no, ver o que acontece. Você vai tirar essa mensagem? Não dá, não é? Não pode ser não. Volta. Então não pode ser não, ó. Ah, que é isso. Vamos tirar, botar aqui de novo. Tá bom, então vamos fazer o D, set state. Só para limpar esses estudos, quando o delete está. Então vamos ver, dar a base aqui. João está aí. Vamos deletear o João. Vê se funciona. Eita. O cara está fora, né? Se foi, né? Acabou. Apareceu on the phone porque deu um... Atualizou a aplicação aqui. Porque toda vez que muda a... A dada base, alguma coisa. Ele fica atualizando. Ele pode desabilitar isso. Disable Live Reload, tá bom? Vamos tirar isso, né? Gosto que é só atualizando quando é muda os arquivos. Então o João se foi. Mas a gente pode botar ele de volta. Botei comando Z aqui, para voltar. Vamos fazer de novo aqui. João, vamos editar. Vamos botar 32. Editar. Agora está 32. Note que não atualizou aqui porque o desativou o Live Reload. Agora vamos deletar esse cara. Se foi, tá bom? Se foi. O que aconteceu? Editar isso. Só de curiosidade. O que acontece? Nada aconteceu. Vamos ver o console aqui. Dei um objeto sem nada. Vou clicar de novo. Objeto sem nada. Vazio, né? Tá bom? E a danca de dados? Sem o João. Então assim que a gente faz o delete. E a gente também fez o patch para fazer um update. Então vamos avisar aqui. Para fazer, quando a gente clicar, editar o perfil aqui. Vai chamar a função. Estou usando a função de Flash. Não preciso usar o binders para ajustar o contexto do palavra chave. Aí vai chamar aqui. Editar perfil. Vou chamar a função. E o URL e vou fazer um objeto aqui. Ter que ser o método patch para atualizar na localidade. E não esqueça de a string 5 com os dados novos. Que serão atualizados. Ah, eu vou ter essa ideia aqui. Acho que não preciso. Desculpe. Tentar novamente. Vou ter o João de volta. Carregando. 24, vamos ver. Tá aí. Preciso de ID não, né? Eu tinha um like eu estava fazendo nos testes. Então, vamos ver o deletear aqui. Deletear, a gente faz o patch. Ter que ser essa pessoa específica. O ID. Método delete. Aí quando for sucesso aqui. Eu só tirei tudo dos forms. Esvazia esses caixos de texto. Tá bom. Obrigado por assistir. Tem algum... Pergunta ou sugestões? Alguma coisa para falar? Fábora deixar nos comentários. Se gostou dos vídeos, por favor, subscreva. E... Por hoje é só. Para esse vídeo... Nesses últimos vídeos a gente aprendeu a usar a função patch. A gente já pode fazer Operação CRUD, né? CRUD, Create, Read, Update, Delete. A gente pode fazer o Create com Post. Fazer um Read com o Get, né? Que é o padrão do patch. Fazer o Update com Patch e o Delete com Delete. A gente já faz... Pode fazer CRUD. E... Nos... Nesse próximo vídeo a gente vai aprender algumas coisas mais... Avançadas, né? A gente já... Perdeu os básicos. A gente já sabe quando é que tá o servidor. Então... Até lá. Até logo, hein? Tchau.

Comentários

Nenhum comentário ainda (loading...)

From YouTube

Nenhum comentário ainda (loading...)

Gostou da aula? 😆👍

Apoie nosso trabalho com uma doação:

Quero contribuir