Javascript III

Métodos de Array

;

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

---

Protocolo HTTP

• Uma visão geral do HTTP;

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.

Anatomia de uma Requisição HTTP

• 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.

Anatomia de uma Resposta HTTP

• 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

• HTTP Statuses
• HTTP Dogs
• HTTP Cats

---

API

• Open APIs;
• What is an API? [Vídeo em inglês];
• O que significa API e como ela funciona

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

• O que é REST API;
• RESTful API (REST API) - inglês;

É 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.

Acessando dados de APIs

• JSON Placeholder;

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.

O que é CORS?

• Cross-Origin Resource Sharing (CORS);
• 3 Ways to Fix the CORS Error - artigo em inglês;

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 e fetch;
• Fontes web.

É importante notar que é um problema que deve ser resolvido no lado do servidor.

---

JSON

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 "".

JSON.parse(data)

• JSON.parse();

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);

---

Requisições

XMLHttpRequest

• XMLHttpRequest;

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.

Anatomia de uma requisição XMLHttpRequest

• Sobre os códigos readyState;

// 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();

Promises

• Promises;
• Usando Promises;
• Callback Hell to Async and Await - artigo em inglês;

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.

Anatomia de Promise

• Promise() constructor;

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

• Fetch(); É um método recentemente introduzido e ainda fase experimental. É usado para transferências de dados entre recursos web. O fetch() retorna uma Promise.

Anatomia de fetch()

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));
}

async e await

• Expressão da função async;

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;
};