JavaScript
A classe FormData
A classe FormData do JavaScript é uma interface útil para
construir um conjunto de pares chave/valor representando os
campos de um formulário e seus valores, que pode ser facilmente
enviada usando a interface XMLHttpRequest ou a interface
fetch.
Função e Aplicação
Função Principal
A principal função da FormData é simplificar a coleta e a formatação dos dados de um
formulário HTML para que possam ser enviados via requisições HTTP. Isso é
particularmente útil para submissões assíncronas (AJAX), onde você deseja enviar os
dados do formulário sem recarregar a página.
Aplicação
1. Coleta de Dados do Formulário: A FormData coleta automaticamente todos os
campos do formulário (inputs, selects, textareas) e seus valores, incluindo
arquivos.
2. Envio de Dados: É comumente usada em conjunto com XMLHttpRequest ou
fetch para enviar dados para o servidor sem recarregar a página.
Métodos e Propriedades
A classe FormData fornece vários métodos úteis:
● append(name, value): Adiciona um novo valor a uma chave existente ou cria
uma nova chave se ela não existir.
● delete(name): Remove todos os valores associados a uma chave.
● get(name): Retorna o primeiro valor associado a uma chave.
● getAll(name): Retorna todos os valores associados a uma chave.
● has(name): Verifica se existe uma chave.
● set(name, value): Define um valor para uma chave, substituindo os valores
existentes.
● entries(): Retorna um iterador com todos os pares chave/valor.
● keys(): Retorna um iterador com todas as chaves.
● values(): Retorna um iterador com todos os valores.
Métodos e Propriedades
A classe FormData fornece vários métodos úteis:
● append(name, value): Adiciona um novo valor a uma chave existente ou cria
uma nova chave se ela não existir.
● delete(name): Remove todos os valores associados a uma chave.
● get(name): Retorna o primeiro valor associado a uma chave.
● getAll(name): Retorna todos os valores associados a uma chave.
● has(name): Verifica se existe uma chave.
● set(name, value): Define um valor para uma chave, substituindo os valores
existentes.
● entries(): Retorna um iterador com todos os pares chave/valor.
● keys(): Retorna um iterador com todas as chaves.
● values(): Retorna um iterador com todos os valores.
Métodos e Propriedades
Conclusão
● A classe FormData é uma ferramenta poderosa e flexível para
coletar e enviar dados de formulário em aplicações web
modernas. Com métodos convenientes para manipulação de
dados e suporte nativo para arquivos, ela simplifica muitas
tarefas comuns no desenvolvimento web, tornando o envio de
formulários assíncronos mais eficiente e direto.
Função e Aplicação
Fetch
O fetch é uma função moderna e nativa do JavaScript usada para fazer
requisições HTTP (como GET, POST, PUT, DELETE) de forma
assíncrona. Ela é baseada em Promises, o que facilita o trabalho com
operações assíncronas de rede, como carregar dados de um servidor ou
enviar dados para ele.
Vamos explorar fetch em detalhes:
Sintaxe Básica
A sintaxe básica do fetch é a seguinte:
fetch(url, options)
● url: O endpoint da requisição, ou seja, o endereço para onde a
requisição será enviada.
● options (opcional): Um objeto que contém configurações adicionais
para a requisição, como método HTTP, cabeçalhos, corpo da
requisição, etc.
Exemplo de POST com fetch
● Para enviar dados para um servidor usando o método POST, você
precisa incluir algumas opções adicionais, como o método HTTP e o
corpo da requisição:
fetch('[Link] {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: [Link]({key1: 'value1',key2: 'value2'})
}).then(response => [Link]()).then(data =>
[Link](data)).catch(error => [Link]('Erro:', error));
Explicação do Exemplo:
fetch('[Link] { ... }):
● Faz uma requisição HTTP POST para o URL fornecido com as opções
especificadas.
method: 'POST':
● Define o método HTTP como POST.
headers: { 'Content-Type': 'application/json' }:
● Define os cabeçalhos da requisição. O Content-Type é definido como
application/json para informar ao servidor que os dados no corpo da
requisição estão no formato JSON.
Explicação do Exemplo:
body: [Link]({ ... }):
● Define o corpo da requisição, que é convertido para uma string JSON usando
[Link].
.then(response => [Link]()):
● Converte a resposta para JSON.
.then(data => [Link](data)):
● Manipula os dados JSON da resposta.
.catch(error => [Link]('Erro:', error)):
● Captura qualquer erro que tenha ocorrido durante o processo de requisição ou parsing
do JSON.
Propriedades e Métodos do Objeto
Response
O objeto Response possui várias propriedades e métodos úteis:
● [Link]: Booleano que indica se a requisição foi
bem-sucedida (status no intervalo 200-299).
● [Link]: O código de status HTTP da resposta.
● [Link]: O texto associado ao status HTTP.
Propriedades e Métodos do Objeto
Response
● [Link](): Retorna uma Promise que resolve com os
dados JSON.
● [Link](): Retorna uma Promise que resolve com os
dados como uma string de texto.
● [Link](): Retorna uma Promise que resolve com os
dados como um Blob (útil para arquivos).
● [Link](): Retorna uma Promise que resolve
com os dados como um ArrayBuffer.
● [Link]: Um objeto Headers associado à resposta.
Conclusão
● A função fetch é uma ferramenta poderosa para fazer requisições
HTTP no JavaScript moderno. Sua utilização baseada em Promises
permite lidar com operações assíncronas de forma clara e eficiente.
Entender como configurar e usar fetch corretamente é essencial
para qualquer desenvolvedor web que precise interagir com APIs e
servidores.
Promises em JavaScript
● O que são Promises?
● Promises são objetos que representam a eventual conclusão (ou
falha) de uma operação assíncrona e seu valor resultante. Elas
facilitam o trabalho com operações assíncronas, permitindo que você
escreva código que espera pela conclusão dessas operações sem
bloquear o fluxo do programa.
Promises em JavaScript
Estados de uma Promise
Uma Promise pode estar em um dos três estados:
1. Pending (Pendente): Inicialmente, a Promise está neste estado,
aguardando ser resolvida ou rejeitada.
2. Fulfilled (Concluída): A operação assíncrona foi concluída com
sucesso e a Promise tem um valor.
3. Rejected (Rejeitada): A operação assíncrona falhou e a Promise tem
um motivo de falha (erro).
Consumindo uma Promise
1. Para consumir o resultado de uma Promise, você usa os métodos .then(), .catch() e
.finally().
Promessa do Professor
async e await em JavaScript
1. O que são async e await?
async e await são palavras-chave que facilitam o trabalho com
Promises, permitindo que você escreva código assíncrono de
maneira mais síncrona e legível. async é usado para declarar uma
função assíncrona, enquanto await é usado para esperar a
resolução de uma Promise dentro de uma função async.
Funções async
Uma função async sempre retorna uma Promise. Dentro de uma função async, você
pode usar await para esperar a resolução de uma Promise.
Usando await
await só pode ser usado dentro de funções async e faz com
que a execução da função assíncrona pause até que a
Promise seja resolvida ou rejeitada.
Exemplo
async/await
Usando async/await, o código se torna mais limpo e
legível, pois parece mais com código síncrono:
Conclusão
● Promises: Representam uma operação assíncrona e permitem encadear
ações a serem tomadas quando a operação é concluída ou falha. Utilizam
métodos .then(), .catch() e .finally().
● async/await: Tornam o código assíncrono mais legível e fácil de escrever,
permitindo esperar pela resolução de Promises de uma maneira que parece
síncrona. Funções async retornam Promises e dentro delas, você pode usar
await para esperar pela resolução de outra Promise.
Dominar Promises e async/await é fundamental para escrever código
JavaScript moderno e eficiente, especialmente quando se trata de operações que
envolvem interações com APIs, bancos de dados, ou outras operações de rede.