23 - Requisições GET com Javascript

Nessa aula você irá aprender a usar o Javascript para fazer requisições HTTP de forma dinâmica, um recurso extremamente importante nos dias de hoje como programador web. E iremos começar com as requisições mais simples, as requisições GET, que servem para obter informações de um back-end. Como exemplo iremos utilizar a Rest Countries, uma API pública que não necessita de autenticação e nos retorna dados sobre os países do mundo.

Vamos lá! o/

A primeira coisa que vamos fazer é criar um arquivo index.html, um arquivo index.css e um arquivo index.js, onde vamos ter a estrutura inicial para essa aula:

Obs.: o css é apenas para termos uma página mais agradável para exibir os dados recebidos.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Requisições GET com Javascript</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <main id="countries">

  </main>

  <script src="index.js"></script>
</body>
</html>

* {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 0;
}

#countries {
  display: flex;
  flex-wrap: wrap;
  padding: 2rem;
}

.country {
  background-color: #eaeaea;
  margin: 1rem;
  padding: 1rem 1.5rem;
  width: 11rem;
}

.country h2 {
  margin-bottom: .75rem;
}

.country img {
  width: 8rem;
  height: auto;
}

Agora no arquivo index.js vamos criar uma função async que será responsável para fazer a requisição e vamos executá-la assim que a página for carregada:

Obs.: é importante que ela seja async pois a função que faz a requisição HTTP retorna uma promise, então será mais fácil trabalhar utilizando a sintaxe async/await.
```
async function getCountries() {

}

getCountries()
```
Dentro da função iremos chamar a função fetch(), ela faz para nós a requisição HTTP e devolve a promise de uma resposta HTTP, portanto iremos chamá-la e usar o await para esperar pela resposta. Também passaremos como parâmetro a url que estamos requisitando:
```
async function getCountries() {
  const response = await fetch('<https://restcountries.com/v3.1/all>')
  console.log(response)
}

getCountries()
```
Temos uma resposta, mas para usar os dados recebidos nela precisamos converter esses dados para um formato que pode ser entendido pelo javascript. Para isso, a própria resposta do fetch() contém um método especial chamado json(). Esse método serve especificamente para obter o conteúdo json da resposta de forma que pode ser manipulado. Ele também retorna uma promise, então também utilizaremos o await:
```
async function getCountries() {
  const response = await fetch('<https://restcountries.com/v3.1/all>')
  const countries = await response.json()

  console.log(countries)
}

getCountries()
```

Agora que vimos que já temos os dados dos países, vamos criar uma função que renderiza esses dados na tela para nós:

function createCountryCard(country) {
  const card = document.createElement('div')
  card.classList.add('country')

  const countryName = country.name.common
  const name = document.createElement('h2')
  name.textContent = countryName

  const flag = document.createElement('img')
  flag.src = country.flags.svg
  flag.alt = countryName

  card.append(name, flag)
  document.querySelector('#countries').append(card)
}

async function getCountries() {
  const response = await fetch('<https://restcountries.com/v3.1/all>')
  const countries = await response.json()

  console.log(countries)
  countries.forEach(createCountryCard)
}

getCountries()