API SIMULATOR...

Oi, João Vitor, tudo bem?

Desculpe a demora em te responder!

Sim, podemos realizar os métodos HTTP de Put e Delete utilizando os dados da API que simulamos por meio do json-server neste curso. Contudo, é importante entender qual é a função de cada uma dessas requisições. O Put é realizado quando desejamos alterar os recursos existentes em uma API, já o Delete é feito quando queremos remover recursos.

Para realizar o método Put podemos seguir a lógica apresentada no código abaixo:

const objetoAtualizado = {
    titulo: "Novo Título", 
    descricao: "Nova descricao", 
    url: "URL do vídeo",
    imagem: "URL da imagem"
};

(async ()=>{
    const elementoAtualizado = await atualizarInformacoes(objetoAtualizado, 2);
    console.log(elementoAtualizado);
})();

async function atualizarInformacoes(data, id){
    const conexao = await fetch ("http://localhost:3000/videos/"+id, {
        method: 'PUT',
        headers: {
            "Content-type": "application/json"
        },
        body: JSON.stringify(data)
    })

    if(!conexao.ok){
        throw new Error ("Não foi possível enviar o vídeo")
    }

    const conexaoConvertida = await conexao.json();
    return conexaoConvertida;
}

Na estrutura para realizar o Put precisamos de três blocos de código: o primeiro contendo o objeto com as informações que devem ser atualizadas, o segundo com a função que realiza o método Put e o terceiro que executa essa função e atua como uma função de seta anônima e assíncrona que se auto-invoca.

Com relação ao segundo bloco de código que diz respeito a função atualizarInformacoes(data, id), perceba que ela possui uma estrutura similar ao método Post com algumas alterações.

Ela recebe dois parâmetros: o primeiro é a informação que será alterada e o segundo é o id responsável por identificar o objeto no qual a alteração será realizada. Este último precisa ser informado juntamente com o link da API ao realizar a requisição fetch seja por meio de uma concatenação ou através do uso da template string.

O method informado precisa ser o 'Put', o headers mantém as mesmas informações e o body recebe o valor genérico passado como primeiro parâmetro na função, que posteriormente receberá os dados contidos na constante objetoAtualizado.

A parte que manipula a resposta recebida é igual ao método Post e como spoiler, será também igual no método Delete. Nela temos uma verificação que informa um erro se a resposta não for bem sucedida, caso contrário a resposta é convertida em json e retorna os dados do objeto.

Para realizar o método Delete podemos seguir a lógica apresentada no código abaixo:

(async ()=>{
    const elementoDeletado = await deletarInformacoes(2);
    console.log(elementoDeletado);
})();

async function deletarConteudo(id){
    const conexao = await fetch ("http://localhost:3000/videos/"+id, {
        method: 'DELETE',
        headers: {
            "Content-type": "application/json"
        }
    })
    if(!conexao.ok){
        throw new Error ("Não foi possível enviar o vídeo")
    }

    const conexaoConvertida = await conexao.json();
    return conexaoConvertida;
}

Na estrutura para realizar o Delete precisamos de dois blocos de código: o primeiro com a função que realiza o método Delete e o terceiro que invoca essa função e atua como uma função de seta anônima e assíncrona que se auto-invoca.

Com relação ao primeiro bloco de código que diz respeito a função deletarInformacoes(id), perceba que ela possui uma estrutura similar ao método Post, recebendo apenas o parâmetro de id colocado com o link da API no momento da realização da requisição fetch. Mas temos pequenas mudanças que fazem total diferença na estrutura do código.

O method informado precisa ser o 'Delete', o headers mantém as mesmas informações e não há necessidade de informar o conteúdo do body, pois as informações contidas no objeto serão apagadas.

Como dito anteriormente a área referente ao tratamento da resposta é a mesma utilizada para os demais métodos.

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição!

Abraços e bons estudos!