# Criando uma mock API com Mocky.io e utilizando o asyncData para requisição de dados HTTP

### O que você irá encontrar neste catálogo:
- [O que é um mock API e para que usá-lo](#O-que-%C3%A9-um-mock-API-e-para-que-us%C3%A1-lo)
- [Configurando o Mocky](#Configurando-o-Mocky)
- [Usando o Fetch](#Usando-o-Fetch)
- [O que é asyncData](#O-que-é-asyncData)
- [Axios X Fetch](#Axios-X-Fetch)

---

### O que é uma mock API e para que usá-la
Durante o desenvolvimento do frontend por conta de atrasos no backend, não é possível continuar certas funcionalidades mais dinâmicas, como renderizar uma lista de objetos que viriam do servidor, para que o desenvolvimento não pare, é possível criar um mock (uma imitação) do servidor e simular o seu retorno. </br>
Algumas opções para criar esse mock são:
- [Mocky](https://designer.mocky.io/)
- [JSON Server](https://github.com/typicode/json-server)
- [MockApi](https://mockapi.io/)
- [Mirage.js](https://miragejs.com/)

Neste catálogo utilizaremos o **Mocky**, pois é um dos mais simples e rápidos de configurar.

---

### Configurando o Mocky

- Acesse o site [Mocky Design](https://designer.mocky.io/design);
- Lá você terá várias opções para configurar o seu mock, como: HTTP status, o tipo de conteúdo da resposta, os headers e o response body;
- No **HTTP Status** você pode escolher o código HTTP de resposta, como: 200 para uma ação de busca realizada com sucesso, ou até mesmo simular um erro no servidor com o código 500;
- Em **Response Content Type** você pode escolher o qual o tipo do conteúdo que a resposta irá retornar, como: application/json para retornar um json, ou multipart/form-data para retornar a resposta de um formulário;
- No **Charset** você pode escolher o encode da resposta;
- Em **HTTP Headers** você pode definir o header da resposta;
- Em **HTTP Respose Body** você pode definir a o corpo da resposta em si, **nessa parte é bom prestar atenção com a formatação do JSON, pois o Mocky não sinaliza caso o JSON esteja mal estruturado.**

**Exemplo:**


Após configurar a sua HTTP Response o Mocky retornará a URL que você utilizará no asyncData para fazer a requisição. (Exemplo de URL: `https://run.mocky.io/v4/ec0d7c68-3146-4b4d-9bb4-3d6604c9bcf6`);

---

### Usando o Fetch

Você pode fazer chamadas simples às APIs com a ferramenta chamada fetch(). Para fazer uma solicitação GET simples com fetch, é preciso apenas passar o URL do endpoint como argumento.

O método fetch, se definido no asyncData, é sempre chamado antes de carregar o componente.

fetch('https://run.mocky.io/v3/93704155-f209-493d-96e2-79c566b8bd88')
    .then((data) => data.json())
    .then((res) => console.log(res))

---

### O que é asyncData
O Nuxt.js adiciona ao projeto Vue um método chamado **asyncData** que permite lidar com operações assíncronas antes de definir os dados do componente.

O **asyncData** é chamado sempre antes de carregar o componente (apenas para componentes da página). Ele pode ser chamado do lado do servidor ou antes de navegar para a rota correspondente.

Este método recebe o objeto de contexto como o primeiro argumento, você pode usá-lo para buscar alguns dados e retornar os dados do componente.

Ao retornar o objeto, o Nuxt.js mesclará automaticamente com os dados do componente.
Por exemplo:

async asyncData() {
    const dados = await fetch('https://run.mocky.io/v3/93704155-f209-493d-96e2-79c566b8bd88')
    .then((data) => data.json())
    .then((res) => console.log(res)) 
    
    return {
        variavelDoData: dados
    }
}

OBS: Você NÃO tem acesso à instância do componente por meio de "this" dentro de asyncData porque ele é chamado antes de inicializar o componente.

---

### Axios X Fetch

// Usando o axios

 async data(){
    let { data } = await axios.get(`http://jsonplaceholder/`)
    return { posts: data }
}

// OU

async asyncData({ $axios }) {
    const ip = await $axios.$get('http://icanhazip.com') 
    return { ip } //retorna os dados em uma variável chamada "ip" 
}

// OU AINDA

async asyncData({ $axios }) {
    const [empresasRes, clientesRes] = await Promise.all([
    $axios.get('/Empresas'),
    $axios.get('/Clientes')
    ])
    return {
      empresas: empresasRes.data.dados,
      donos: clientesRes.data.dados
    }
}

o Axios stringuifica (stringifies) automaticamente os dados enviados nas requests (você também pode sobrescrever o comportamento padrão e criar um meio de transformar o dado). Quando usamos fetch() você precisa fazer isso manualmente (com o .then, como visto anteriormente).

> FONTES:
> https://pt.quish.tv/difference-between-asyncdata-vs-fetch
> https://nuxtjs.ir/guide/async-data