# Requisições síncronas e assíncronas
%[https://www.youtube.com/watch?v=tUZgN6Nm4Fk&list=PLcQQun5wwBt6UHHlRv6wcFVgahOHPAhWb&index=10]
[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1768417689084/0d93df31-1868-4e62-b3e8-25df344bb4a8.jpeg align="center")](https://www.udemy.com/course/logica-de-programacao-com-pascalzim/?referralCode=E547897C16AD4FF23AED)
Primeiramente vamos entender o fluxo cliente-servidor. As aplicações solicitam através das requisições e aguarda uma resposta, por exemplo: O navegador (cliente) faz uma requisição e o servidor retorna uma resposta.
**Tipos de requisição**
Síncrona
Após ser feita uma requisição o processo remetente é bloqueado até que se obtenha uma resposta, diante desse fluxo não é possível solicitar outras requisições enquanto a requisição feita seja concluída com sucesso.
Assíncrona
Pode ser feita diversas requisições em paralelo, onde cada resposta é retornada quando estiver pronta.
`;
newContent += `${data.results[i].name}
`;
newContent += ``;
newContent += ``;
}
document.getElementById('pokemon').innerHTML = newContent;
}
}
xhrObject.open("get", "https://pokeapi.co/api/v2/pokemon/", true);
xhrObject.send();
}
```
Digite o código no codepen para visualizar o resultado [https://codepen.io/](https://codepen.io/)
```javascript
```
Digite o código no codepen para visualizar o resultado [https://codepen.io/](https://codepen.io/)
```javascript
* {margin:0;padding:0;}
body{background:#00964a;}
.pokemon{display:flex;flex-wrap:wrap;list-style:none;}
.pokemon__card{background:white;box-shadow:5px 5px 5px 1px rgba(64, 64, 64, 0.66);width:10%;margin:15px;height:auto;min-height:200px;display:flex;align-items:center;flex-direction:column;justify-content:space-evenly;text-align:center;border-radius:5px;position:relative;transition:all .2s ease-in-out;top:0;}
.pokemon__card:hover{top: -5px;}
.pokemon__thumb{width:100px;}
.pokemon__title{font-size:16px;font-family:'arial';text-transform:capitalize;}
```
Digite o código no codepen para visualizar o resultado [https://codepen.io/](https://codepen.io/)
Resultado
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1718036456880/4cad99e8-3f12-4e38-8053-3728b1e4c34c.png align="center")
**Developer Tools**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1718036494718/d4fb484b-6f6c-41b1-8a17-c90ab6c41816.png align="center")
**Fetch API**
Uma requisição feita com Fecth é semelhante ao XMLHttpRequest porém ela oferece um conjunto de recursos mais poderosos e flexível.
```javascript
/*
API POKEMON
https://pokeapi.co/api/v2/pokemon/
https://pokeres.bastionbot.org/images/pokemon/1.png
*/
window.onload = function() {
const _url = 'https://pokeapi.co/api/v2/pokemon/';
const _options = {
method: 'GET',
mode: 'cors',
redirect: 'follow',
cache: 'default'
}
fetch(_url,_options)
.then(function(response) {
// tratamento de erro
if(!response.ok) throw new Error('Erro ao executar requisição');
// retorna um objeto no formato json
return response.json();
})
// recebe os dados
.then(function(data) {
console.log(data);
// OUTPUT: {count: 1118, next: "https://pokeapi.co/api/v2/pokemon/?offset=20&limit=20", previous: null, results: Array(20)}
let newContent = '';
for(let i = 1; i < data.results.length; i++) {
newContent += ``;
newContent += ``;
newContent += ``;
newContent += `${data.results[i].name}
`;
newContent += ``;
newContent += ``;
}
document.getElementById('pokemon').innerHTML = newContent;
});
}
```
Digite o código no codepen para visualizar o resultado [https://codepen.io/](https://codepen.io/)
```javascript
```
Digite o código no codepen para visualizar o resultado [https://codepen.io/](https://codepen.io/)
```javascript
* {margin:0;padding:0;}
body{background:#00964a;}
.pokemon{display:flex;flex-wrap:wrap;list-style:none;}
.pokemon__card{background:white;box-shadow:5px 5px 5px 1px rgba(64, 64, 64, 0.66);width:10%;margin:15px;height:auto;min-height:200px;display:flex;align-items:center;flex-direction:column;justify-content:space-evenly;text-align:center;border-radius:5px;position:relative;transition:all .2s ease-in-out;top:0;}
.pokemon__card:hover{top: -5px;}
.pokemon__thumb{width:100px;}
.pokemon__title{font-size:16px;font-family:'arial';text-transform:capitalize;}
```
Digite o código no codepen para visualizar o resultado [https://codepen.io/](https://codepen.io/)
**Resultado**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1718036665555/48f503ba-b3a6-4d45-8392-9fc3687d6845.png align="center")
---
**JSON**
**J**ava**S**cript **O**bject **N**otation
Ajax é uma técnica utilizada para carregar os dados de um serviço em uma parte da aplicação sem ter que atualizar completamente a página inteira. Esses dados costumam ser enviados em um formato chamado JSON.
Os serviços hospedados em servidores geralmente reenviam HTML, XML ou JSON.
[https://www.json.org/json-en.html](https://www.json.org/json-en.html)
[https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=pt-BR](https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=pt-BR)
**Formato de dados**
1. **HTML**
Vantagens
\- É facil de escrever, solicitar e exibir.
\- Os dados enviados do servidor vão diretamente para a página.
\- Não há necessidade de o navegador processá-los.
Desvantagens
\- Não é adequado para utilizar em outras aplicações apenas em navegadores.
\- Não possui boa portabilidade de dados.
\- A solicitação deve vir do mesmo domínio.
2. **XML**
Vantagens
\- É um formato flexível e pode representar estruturas complexas.
\- Funciona bem em outras plataformas e aplicativos.
\- É processado utilizando os mesmos métodos DOM que os da HTML.
Desvantagens
\- Considerado uma linguagem prolixa pois as tags adicionam uma grande quantidade de caracteres extras aos dados que são enviados.
\- A solicitação tem que ser do mesmo domínio.
\- Pode exigir muito código para processar o resultado.
3. **JSON**
Vantagens
\- Pode ser requisitado de qualquer domínio.
\- Mais conciso e menos prolixo que HTML e XML.
\- O uso é mais amplo em aplicações web.
Desvantagens
\- Sintaxe não tolerante, uma aspa, vírgula ou dois pontos ausentes pode quebrar o código.
\- Pode conter conteúdo malicioso.
\- Sempre utilizar JSON de fontes confiáveis.
**JSON - Notação de objeto**
Semelhante com a sintaxe de objeto literal.
```javascript
{
// chave // valor
"name": "AreaDev",
"subscribers": 5000,
"available": true
}
```
Sempre utilizar aspas duplas nas chaves e não colocar vírgula no último par de chave e valor.
| Tipos de Dados | Descrição |
| --- | --- |
| string | texto, deve ser escrito entre aspas. |
| number | número |
| boolean | true or false |
| array | array de valores. Pode ser um array de objetos também. |
| object | Objeto JavaScript |
| null | valor vazio ou ausente |
**Trabalhando com dados JSON**
**Troca de dados**
Ao trocar dados entre o navegador e o servidor, os dados podem ser apenas texto.
JSON é texto e podemos converter qualquer objeto JavaScript em JSON e enviar JSON ao servidor.
Além disso, é possível converter qualquer JSON retornado do servidor em objetos JavaScript.
**Recebendo dados**
Se você receber dados no formato JSON, poderá convertê-los em um objeto JavaScript.
```javascript
let data = '{"name":"Bruno", "age":25, "city":"São Paulo"}';
let object = JSON.parse(data);
document.write(object.name);
// OUTPUT: Bruno
```
**Enviando dados**
Se você estiver com dados armazenados em um objeto JavaScript, poderá converter o objeto em JSON e enviá-lo a um servidor.
```javascript
let object = {"name":"Bruno", "age":25, "city":"São Paulo"};
let data = JSON.stringify(object);
document.write(data);
// OUTPUT: {"name":"Bruno","age":25,"city":"São Paulo"}
```
**Armazenando Dados no Local Storage**
Os dados devem estar em um determinado formato, o formato de texto é sempre um dos principais. O JSON torna possível armazenar Objetos JavaScript como texto.
```javascript
let object = {"name":"Bruno", "age":25, "city":"São Paulo"};
let data = JSON.stringify(object);
localStorage.setItem("user", data);
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1718068344303/c1d38473-d0ff-4f2d-8db9-015da09730cd.png align="center")
**Recuperando os dados**
```javascript
let item = localStorage.getItem("user");
let obj = JSON.parse(item);
console.log(obj.name);
// OUTPUT: Bruno
```
JSON.stingfy()
Converte objetos JavaScript em uma string, formatada utilizando JSON. Isso permite enviar objetos JavaScript do navegador para outra aplicação.
JSON.parse()
Processa uma string contendo dados JSON. Os dados são convertidos em objetos JavaScript pronto para serem utilizados no navegador.