conectaApi.js
async function listaVideos() {
const conexao =await fetch("http://localhost:3000/videos");
const conexaoConvertida = await conexao.json(); /*O que esse método json faz? Ele pega todos aqueles dados em formato de bytes,
que estávamos recebendo antes e transforma em um json bonito. E lembra que um json, ele parece um objeto? Até que o nome dele em
JavaScript é object notation? Na tela, ele transformou em um objeto para conseguirmos ter acesso a todos os valores lá dentro. */
// console.log(conexaoConvertida); não precisamos mais
return conexaoConvertida /*Quando chamar essa função ele vai retornar aquela lista cheia de coisas do db.json para onde for chamada */
}
//cria a funçao cria video
async function criaVideos(titulo, descricao, url, imagem)
/*Agora precisamos fazer alguns ajustes. Como eu disse, quando botei titulo: título é porque esse segundo título que está sendo
atribuído, era para recebermos como variável, para fazer isso, vamos lá na linha oito e dentro dos parênteses, vamos botar esses
valores título, descrição, URL, vírgula imagem.
Agora vamos conseguir enviar para a variável, enviar para a função criarVideo esses valores, e esses valores vão ser atribuídos
a essas propriedades do body. */
{
const conexao = await fetch("http://localhost:3000/videos",{
/*No nosso caso, agora vamos criar uma requisição POST. Mas não para por aí, temos outras coisas para colocar aqui dentro,
como bota uma vírgula depois do POST, dá um Enter e vamos vai colocar headers: {} e abre e fecha chaves, porque também
vai ter um conjunto de configurações que poderiam ser feitas, mas vamos botar um só, que é "Content-type":application/json". */
method: "POST",
/*Lembra que quando eu falei que quando fazíamos o fetch, o único parâmetro obrigatório era URL. E se não especificássemos mais
nada, o método que estávamos usando, a requisição que estávamos fazendo era GET? Para declarar outros tipos de requisições,
é assim, vamos colocar várias outras configurações entre chaves. Inclusive, qual que vai ser o tipo de requisição, que é o método. */
headers: {
"Content-Type": "aplication/json"
/*O Content-type que está dentro do headers ele serve para especificar que tipo de arquivo que está sendo enviado, ou
recebido. Então quando estamos enviando, ou quando estamos recebendo um arquivo de json, especificamos o tipo do conteúdo,
que é o Content-type, como application/json. */
},
/* tem mais coisa para colocar aqui? Tem. Então depois então do fechamento das chaves do headers, vamos botar uma vírgula,
dá um Enter para ficar embaixo, vamos botar body:JSON.stringify({}). Aqui dentro, vamos enviar os dados que queremos cadastrar
nesta requisição, que é título, descrição, URL e imagem. Então vamos botar título = título, que vamos receber uma variável
chamada título, não declaramos ainda, mas vamos. Depois vírgula embaixo, descricao =. Onde estou falando igual são dois pontos,
url: url, imagem: imagem.
Então, o que estamos fazendo aqui? Estamos enviando um body, que como a tradução diz, ele é o corpo da requisição, e quando
colocamos as chaves com essas coisas ali dentro no lado superior esquerdo da tela, estamos enviando um objeto de variáveis,
de valores, indiferentes, pode ser um número, pode ser uma letra, estamos enviando um objeto de valor.
Só que para enviar uma requisição, precisamos enviar uma string. Então esse JSON.stringify ele vai transformar em uma string
tudo aquilo ali que a gente estamos enviando. Assim, vai ser possível criar solicitação POST, a requisição POST.*/
body: JSON.stringify({
titulo: titulo,
/*vamos alterar a descricao - Também, vou ajustar um negócio aqui. Lembra que a descrição ela era tantas mil visualizações.
Se eu conseguir colocar manualmente esse número de visualizações não faz sentido, porque quando vamos em outras plataformas
de compartilhamento de vídeo isso não é do controle do usuário, isso é de acordo com os cliques. Como ainda não vamos
implementar uma função que tem um contador, vamos fazer um número tais visualizações.*/
//descricao: descricao,
descricao: `${descricao} mil visualizações`,
url: url,
imagem: imagem
})
} );
const conexaoConvertida = await conexao.json();
return conexaoConvertida;
}
async function buscaVideo(termodeBusca) {
const conexao = await fetch (`http://localhost:3000/videos?q=${termodeBusca}`);
const conexaoConvertida = conexao.json();
return conexaoConvertida;
}
)
Central de Ajuda Alura