Principais Métodos
- concat faz cópia simples do Array e adiciona os argumentos
- join cria um string do Array. Adiciona o argumento como cola entre cada membro do Array.
- shift remove e retorna o primeiro elemento
- pop remove e retorna o ultimo elemento
- unshift anexa os argumentos na frente do Array
- push anexa os argumentos no final do Array
- reverse inverte o Array sem copiá-lo
- slice faz cópia simples da porção do Array delimitada por argumentos do índice
- splice remove elementos especificados do Array, e os substitui com argumentos adicionais opcionais
- ** sort classifica o Array sem copiá-lo, opcionalmente usando um argumento comparador
- toString chama join sem passar um argumento
- indexOf retorna o primeiro elemento igual ao valor especificado, ou -1 *se nenhum for encontrado
- lastIndexOf retorna o último elemento igual ao valor especificado, ou -1 se nenhum for encontrado
- ** forEach aplica a função fornecida para todos elementos do Array
- ** map cria um novo Array contendo os resultados da aplicação da função a todos elementos do Array
- ** filter cria um novo Array contendo todos os elementos para os quais a função fornecida retorna verdadeiro
- ** reduce aplica uma função simultaneamente para dois valores do Array (da esquerda para a direita) de forma a reduzi-los a um valor único
- some Checa se pelo menos um dos elementos do array obedece a condição passada pela função
- every Checa se todos os elementos do array obedecem a condição passada pela função
HTTP é um protocolo que faz a conexão entre um receptor, normalmente o navegador (browser) e um servidor. Ela é a base da transferência de dados na Web.
Quando um site é acessado, seu navegador envia uma solicitação (request) para o servidor onde ele está hospedado. Este, por sua vez, envia uma resposta (response) com o resultado dessa solicitação.
Por exemplo, ao chamar um script, uma folha de estilo ou uma imagem, é feita uma requisição para cada um desses recursos.
- Método HTTP, verbo como GET, POST, PUT, DELETE. As requisições para pegar e mostrar dados normalmente são feitas através de GET. Os demais verbos podem ser usados para modificar dados do servidor ou banco de dados;
- Origem e porta da requisição e caminho do arquivo solicitado;
- Versão do protocolo HTTP;
- Cabeçalhos (header) com informações para os servidor;
- Corpo (body) que são necessários para algumas requisições POST.
- Versão do protocolo HTTP que o servidor segue;
- Código de status (veja referências abaixo);
- Cabeçalhos (header) com informações vindas do servidor;
- Corpo (body) com dados solicitados, se houver.
Código de Status das Respostas
API é a abreviação de Application Programming Interface, ou em português, Interface de Programação de Aplicativos. Trata-se de uma interface de comunicação e integração entre aplicações.
Por exemplo, para usar dados do Maps, o Google desenvolveu uma API para ser consumida entre desenvolvedoras.
Cada API possui uma documentação e modo de comunicação, quais informações (headers e body) enviar para a API para conseguir ter acesso a seus dados. Algumas delas permitem que seja feita alteração de dados e não somente consulta.
Alguns verbos, métodos, que são usados:
Método | O que faz | Status de retorno |
---|---|---|
GET | Traz informações | 200 |
POST | Cria um novo item | 201 |
PUT | Atualiza um item | 200 |
DELETE | Remove um item | 200 |
É possível também se deparar com a nomenclatura REST API. É uma abreviação para Representational State Transfer, ou em português, Transferência de Estado Representacional.
Trata-se de uma arquitetura em que uma API é construída, seguindo determinadas práticas, usando os verbos existentes do protocolo HTTP. É como se fosse um método BEM para APIs. É possível fazer um estilo CSS sem seguir o método, mas pode ser vire uma bagunça e não seja intuitivo. A arquitetura REST API faz com que o consumo das APIs sejam mais intutivos e organizados.
Para acessar uma API, via de regra, basta acessarmos sua URL em um navegador. Ela nos retorna o dado designado a esse caminho, normalmente um JSON.
Acessando a partir do navegador, estamos fazendo uma requisição GET
. Para fazer requisição com outros verbos (POST
, por exemplo), temos que usar outras ferramentas. Veja a seção Requisições.
Quando se faz uma requisição para um recurso externo, por padrão, o cliente (navegador) bloqueia se as origens são diferentes. O servidor deve, então, permitir o acesso de origens distintas. O CORS, ou Compartilhamento de Recursos de Origem Diferente, vem como mecanismo para permitir o acesso desses recursos.
Não são todos os recursos que necessitam de CORS. Alguns exemplos:
- Requisições com
XMLHttpRequest
efetch
; - Fontes web.
É importante notar que é um problema que deve ser resolvido no lado do servidor.
JSON é a abreviação de JavaScript Object Notation ou Notação de Objeto Javascript. É uma sintaxe para armazenar e tranferir dados. Trata-se de uma string que se parece bastante com um objeto Javascript.
[
{
"nome": "Mellina",
"idade": 21,
"profissão": "desenvolvedora"
},
{
"nome": "Joana",
"idade": 12,
"profissão": "criança"
}
]
Nota-se que as propriedades, no JSON, necessariamente tem que estar entre ""
.
O método JSON.parse(data)
transforma a data
string do JSON em um objeto Javascript para ser manipulado e o retorna.
const parsedData = JSON.parse(data);
XMLHttpRequest (XHR) é um objeto que são usados para interagir com servidores. São usados para receber dados de uma URL sem ter que atualizar de novo a página - é criado uma requisição assíncrona.
Apesar de ter "XML" no seu nome, a requisição de XMLHttpRequest
pode receber qualquer tipo de dado.
// cria um novo construtor XMLHttpRequest
const request = new XMLHttpRequest();
const metodo = "GET";
const url = "https://exemplo.com";
// inicializa a requisição
request.open(metodo, url, true);
// adiciona um evento para ser ativado quando o readyState mudar
request.addEventListener("readystatechange", function () {
// verifica se a conexão foi bem sucedida
if (request.readyState == 4 && request.status == 200) {
// atribui a uma nova variável o JSON já transformado em objeto Javascript (através do parse())
const data = JSON.parse(request.response);
}
})
// envia a requisição para o servidor
request.send();
Promise é um objeto que representa o sucesso ou fracasso de uma operação assíncrona. Elas são bastante usadas dentro de outras estruturas apresentadas no ES6.
Para criar uma nova Promise, é necessário usar a palavra-chave new
. Existe um construtor nativo e ele retorna o objeto Promise
.
O callback (executor) da Promise
recebe dois parâmetros: resolve e reject. Esses parâmetros são funções geradas pelo construtor
Depois disso, é possível usar os métodos then()
e catch()
. Ambos recebem callbacks que são executados quando há uma resolução ou rejeição da Promise
.
const promise = new Promise((resolve, reject) => {
if (condicao) {
resolve("resolvido!"); // dado é retornado para o then
} else {
reject("aaahh errooou"); // entra no catch
}
});
promise
.then((data) => {
console.log(data);
})
.catch((err) => {
console.log(err);
});
- Fetch();
É um método recentemente introduzido e ainda fase experimental. É usado para transferências de dados entre recursos web. O
fetch()
retorna umaPromise
.
Para realizar uma requisição GET
, sem informações adicionais:
fetch(url)
.then(response => response.json())
.then(json => console.log(json))
.catch(erro => console.log(erro));
}
Opcionalmente, é possível adicionar informações da requisição, como segundo parâmetro, por meio de um objeto.
fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'image/jpeg'
}
mode: 'cors',
cache: 'default'
})
.then(response => response.json())
.then(json => console.log(json))
.catch(erro => console.log(erro));
}
A palavra-chave async
é usada em declarações ou expressões de funções. Assim, elas se tornam funções assíncronas e permitem o uso do await
dentro delas.
Elas normalmente são usadas em conjunto de funções assíncronas, como Promise
(e, consequentemente, fetch
), quando é necessário esperar a resolução desta para dar continudade às operações seguintes.
function resolveDoisSegundos(x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x);
}, 2000);
});
};
const expFuncaoAsync = async x => {
const a = await resolveDoisSegundos(20); // aguarda essa promise ser resolvida antes de continuar
return x + a;
};