This I Promise You - Entendendo o fluxo de Promise em JS
Tags: javascript, tutorial, learning, promises
Published: 2020-12-18 12:49:16


Hoje vim falar sobre promises. As promises surgem como uma alternativa para evitar o uso de muitas callbacks, que poderiam deixar o código pouco legível e para facilitar desenvolvimento de aplicações que precisem fazer requisições API.

Entender Promises é fundamental para esse fluxo de desenvolvimento, porque é em Promises que o fluxo de requisições para uma API funciona. Sua aplicação faz uma requisição à API externa e essa requisição retornará uma Promise, um objeto com diversas propriedades, sendo duas delas, o sucesso e o erro.

## API:

API é uma forma de permitir uma aplicação se comunicar com outra, garantindo que uma aplicação que faça uma requisição possa acessar os dados de um determinado banco e trabalhar esses dados da forma que lhe agradar para exibir em sua aplicação.

Pense no fluxo do Ifood, existe o aplicativo e em algum lugar está armazenado as informações sobre os produtos de um determinado restaurante, quando você clica no restaurante, ele faz uma requisição para a API que faz a comunicação com o banco de dados e retorna a Promise dessa requisição. O restaurante existindo nesse banco de dados, o Ifood lida com a propriedade sucesso dessa Promise e nessa propriedade encontram-se as informações referentes aos pratos do restaurante.


## Promises:

Uma promise possui três estados, _**pending**_, ***resolved***, ***rejected***. **Pending** é seu estágio inicial após a função que a chamou ser executada. Essa função que chamou a promise continuará sua execução até que a promise retorne algo.

Essa é um dos principais motivos de usarmos tanto promises, o aguardo por seu retorno não trava a aplicação, o que não depende de seu retorno segue sendo executado e o que depende vai para uma área especial, aguardando o retorno da promise para ser executado.

**Resolved** e **Rejected** referem-se ao seu retorno. Resolved é o estado de sucesso na requisição, rejected é quando houve algum problema que a Promise retorna um erro.

Com promises, você garante que as callbacks dela nunca serão chamadas antes de acabar a fila atual de execuções, que as callbacks chamadas posteriormente serão executadas de acordo com o fluxo, depois da conclusão da promise e que você pode fazer um encadeamento de callbacks para determinadas ações com o que for retornado da promise.

### Construção de uma Promise:

Ela é feita a partir de um `Constructor`. Constructor nada mais é que uma função especial construtora de objetos. E sim, Promise nada mais é que um objeto com duas propriedades: resolve e reject.

Sua sintaxe é simples:

```javascript
const promise = new Promise((resolve,reject) => {

}
```

O *new* é um operador que garante que estaremos criando um novo objeto baseado na função passada após o operador, logo, nessa sintaxe acima, estamos definindo que a variável promise irá armazenar um novo objeto baseado no consructor Promise.

### Resolve e Reject:

Resolve e Reject são duas funções de retorno de uma promise. Serão as funções a serem executadas de acordo com o retorno da execução da promise. Se uma promise satisfaz a condição desejada, ela foi resolvida, logo será executado o que for passado para a função ***resolve***, caso a condição não seja satisfeita, será rejeitada e será então executado o que for passado para a função ***reject***.

Quer ver funcionando?

Abra o seu VSCode e estruture a seguinte linha de raciocínio:

```javascript
const promise = (number) => {
  new Promise((resolve, reject) => {
    const numberInput = number;

    if(numberInput > 10) {
      return resolve(console.log('Excelente, promise resolvida com sucesso'));
    }
    return reject(console.log('Ops! Ocorreu algum erro com sua requisição, por favor, tente novamente.'));
  });
}
```
Entendendo o código acima:
- promise é uma função que espera um argumento ao ser chamado, esse argumento refere-se ao parâmetro number e retorna uma promise.
- O valor desse number é armazenado na variável numberInput.
- O if verifica a condição do numberInput, se ele for maior que 10.
- Caso o numberInput seja **maior** que 10, a promise será resolvida e terá o retorno no console a frase *`“Excelente, promise resolvida com sucesso”`*.
- Caso o numberInput seja **menor** que 10, a promise será rejeitada e terá o retorno no console a frase *`“Ops! Ocorreu algum erro com a sua requisição, por favor, tente novamente”`*.

Chame a função passando um valor maior que 10 como argumento:

```javascript
promise(12)
```

Agora rode novamente o comando no seu terminal:

```bash
node script.js
```

Ao rodar o comando, você verá que no seu terminal exibirá a seguinte mensagem:

```
“Excelente, promise resolvida com sucesso”
```

Altere o valor de chamada da função para um número menor que 10 e rode o comando novamente:

```javascript
promise(2)
```

```bash
node script.js
```

```
“Ops! Ocorreu algum erro com sua requisição, por favor, tente novamente”
```

Dessa vez o retorno foi diferente, pois não foi satisfeita a condição para que sua requisição fosse bem sucedida.


Para ter uma perspectiva melhor do fluxo de uma promise, execute testes com o `Math.random()`.


```javascript
const randomNumber = Math.floor(Math.random() * 20)
promise(randomNumber);
```

## fetch API:

***fetch()*** é a função que é executada para fazer a requisição a uma API. Ela é uma função nativa do objeto `Window`(do seu navegador, no caso) que recebe como argumento o *`endpoint`*(termo utilizado para se referir ao link que deve ser utilizado para fazer a requisição para a API) e retorna a promise, resolvida ou não.

Normalmente esse retorno pode vir de várias formas, aqui vamos trabalhar com API de retornos *`JSON`*, que é algo muito similar a um objeto JavaScript, mas para manipularmos precisará de um pequeno tratamento.

## .then() e .catch():

***.then()*** e ***.catch()*** são as primeiras formas que tivemos de lidar com o retorno de promises. Lembrando que promises são assíncronas, mas o fluxo do nosso código não é, precisavamos de alguma forma de informar ao código que naquele bloco de código precisaria haver uma espera por uma resposta. 

Para isso foi desenvolvido o `.then()`, ele faz parte de uma cadeia de encadeamento de funções, serve para tratar o retorno **`resolvido`** da promise através de uma callback functions. Em tradução literal, “then” significa `“então”`, logo na cadeia de funções, podemos entender, com ele vindo após o fetch que a lógica será “faça a requisição, espere o retorno e `então` execute esse código aqui”.

Já o `.catch()` serve para tratar o retorno **`rejeitado`** da promise, caso haja alguma falha no processo de requisição e ela retorne um erro, o catch, `captura` esse erro para que você possa utilizar a mensagem de erro para tentar entender qual foi a falha ou em uma aplicação gerar alguma notificação para a pessoa usuária de porque sua solicitação não retornou algo.

Vamos entender juntos esse fluxo, abra seu VScode, crie um arquivo `script.js` em outra pasta e prepare seu ambiente para que possas trabalhar com fetch direto no VSCode:

Você precisará trabalhar com uma dependência do node, chamada `node-fetch`. Pois, como comentado na descrição do fetchAPI, ela é nativa do Objeto Window, ou seja, funciona no ambiente de navegador. Essa dependência que vamos instalar irá permitir utilizar o fetch no contexto do **node.js** e verificar seu retorno no próprio VSCode.

Para começar, precisamos iniciar um arquivo ***`package.json`*** que irá armazenar as informações da dependência e permitir seu uso, para isso, rode o comando abaixo:

```bash
npm init -y
```
Feito esse procedimento, prossiga para instalação do ***`node-fetch`*** com o comando:

```bash
npm install node-fetch
```
Excelente! Agora seu ambiente está pronto para os primeiros experimentos com fetch. Para essa prática de fixação, utilizaremos uma API gratuita de ***[citações da franquia star wars](http://swquotesapi.digitaljedi.dk/index.html)*** que retorna elas de forma aleatória:

```
http://swquotesapi.digitaljedi.dk/api/SWQuote/RandomStarWarsQuote
```

No site acima, se copiado no seu navegador, estará o retorno que receberemos ao final do `.then()` que irá tratar o formato do retorno do fetch. Para uma melhor visualização, indico a extensão do chrome ***[JSON Viewer](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=pt-BR)***, que irá garantir a estrutura para visualizar no formato adequado:

![](https://i.ibb.co/sj18Zjw/JSON-viewer.jpg)

Será exibido no formato acima caso seja instalada a extensão JSON Viewer.

Sua primeira linha terá que solicitar a dependência, para atribuir um valor a fetch e tornar viável seu uso, logo seu código deve começar com:

```javascript
const fetch = require('node-fetch');
```
Feito isso, podemos desenvolver a função:
```javascript
function SWQuote() {
	fetch('http://swquotesapi.digitaljedi.dk/api/SWQuote/RandomStarWarsQuote')
	.then((quotes) => console.log(quotes))
}

SWQuotes()
```

Ao rodar o comando `node script.js`, teremos um objeto similar ao seguinte objeto retornado no console:

```bash
Response {
  size: 0,
  timeout: 0,
  [Symbol(Body internals)]: {
    body: Gunzip {
      _writeState: [Uint32Array],
      _readableState: [ReadableState],
      readable: true,
      _events: [Object: null prototype],
      _eventsCount: 6,
      _maxListeners: undefined,
      _writableState: [WritableState],
      writable: true,
      allowHalfOpen: true,
      _transformState: [Object],
      _hadError: false,
      bytesWritten: 0,
      _handle: [Zlib],
      _outBuffer: <Buffer 7b 22 69 64 22 3a 35 34 2c 22 73 74 61 72 57 61 72 73 51 75 6f 74 65 22 3a 22 52 65 6d 65 6d 62 65 72 2c 20 6d 79 20 64 65 61 72 20 4f 62 69 2d 57 61 ... 16334 more bytes>,
      _outOffset: 0,
      _chunkSize: 16384,
      _defaultFlushFlag: 2,
      _finishFlushFlag: 2,
      _defaultFullFlushFlag: 3,
      _info: undefined,
      _level: -1,
      _strategy: 0,
      [Symbol(kCapture)]: false
    },
    disturbed: false,
    error: null
  },
  [Symbol(Response internals)]: {
    url: 'http://swquotesapi.digitaljedi.dk/api/SWQuote/RandomStarWarsQuote',
    status: 200,
    statusText: 'OK',
    headers: Headers { [Symbol(map)]: [Object: null prototype] },
    counter: 0
  }
}
```

Agora entra a questão que havia comentado sobre o tipo de retorno da requisição. Dessa forma, ela não foi tratada ainda. Mas não se preocupe, não há necessidade de entender esse objeto agora e muito menos se desesperar com essa ideia de uma lógica para tratar essa informação e obter o que desejamos. Felizmente, como realmente esse tipo de processo é rotineiro nos dias de uma pessoa desenvolvedora, já existe uma funcionalidade para isso, que é a função ***`.json()`***.

Vamos evoluir nosso código para termos exatamente a resposta que desejamos, tratando esse primeiro objeto:

```javascript
function SWQuote() {
	fetch('http://swquotesapi.digitaljedi.dk/api/SWQuote/RandomStarWarsQuote')
  .then((quotes) => quotes.json())
  .then((quote) => console.log(quote))
}

SWQuotes()
```
Executando mais uma vez o comando `node script.js`, agora você terá um retorno similar ao abaixo, dado que a API retorna citações de forma aleatória, então ***pode não ser a mesma citação***.

```bash
{
  id: 6,
  starWarsQuote: 'It’s the ship that made the Kessel run in less than twelve parsecs. I’ve outrun Imperial starships. Not the local bulk cruisers, mind you. I’m talking about the big Corellian ships, now. She’s fast enough for you, old man. — Han Solo',
  faction: 4
}
```
Para entender então o que fizemos:
- `fetch()` faz a requisição à API e retorna a promise com seu resolve e reject.
- O **primeiro** `.then()` pega esse retorno e faz o tratamento para json.
- O **segundo** `.then()` pega o retorno do tratamento e nos exibe no console como fica.

Ficou faltando agora lidarmos com algum possível erro ao longo do processo de requisição. Fazemos isso com a função `.catch()`, que será sempre a ***`última função`*** no nosso encadeamento de funções, justamente para capturar o erro ao fim do processo e permitir que você possa manipulá-lo como achar mais adequado.

```javascript
function SWQuote() {
	fetch('http://swquotesapi.diitaljedi.dk/api/SWQuote/RandomStarWarsQuote')
	.then((quotes) => quotes.json())
	.then((quote) => console.log(quote))
	.catch((error) => console.log(error))
}
```

No código acima, perceba que foi feita uma leve alteração no link para a API, *`apagando o g em “digital”`* para forçar um erro. Abaixo, perceba a diferença da mensagem com o `.catch()` para informar o erro e sem o `.catch()`:

```bash
// com o .catch((error) => console.log(error))
FetchError: request to http://swquotesapi.diitaljedi.dk/api/SWQuote/RandomStarWarsQuote failed, reason: getaddrinfo ENOTFOUND swquotesapi.diitaljedi.dk
    at ClientRequest.<anonymous> (/media/thiago-troll/5C112506248A591C/trybe/trybe-exercises/modulo_intro_web/bloco_9/dia_2/fetch_API/node_modules/node-fetch/lib/index.js:1461:11)
    at ClientRequest.emit (events.js:315:20)
    at Socket.socketErrorListener (_http_client.js:426:9)
    at Socket.emit (events.js:315:20)
    at emitErrorNT (internal/streams/destroy.js:92:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
  type: 'system',
  errno: 'ENOTFOUND',
  code: 'ENOTFOUND'
}
```
```bash
// sem o .catch((error) => console.log(error))
(node:117135) UnhandledPromiseRejectionWarning: FetchError: request to http://swquotesapi.diitaljedi.dk/api/SWQuote/RandomStarWarsQuote failed, reason: getaddrinfo ENOTFOUND swquotesapi.diitaljedi.dk
    at ClientRequest.<anonymous> (/media/thiago-troll/5C112506248A591C/trybe/trybe-exercises/modulo_intro_web/bloco_9/dia_2/fetch_API/node_modules/node-fetch/lib/index.js:1461:11)
    at ClientRequest.emit (events.js:315:20)
    at Socket.socketErrorListener (_http_client.js:426:9)
    at Socket.emit (events.js:315:20)
    at emitErrorNT (internal/streams/destroy.js:92:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)
(node:117135) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:117135) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
```

E você pode tratar ainda mais esse erro, altere seu código para:

```javascript
function SWQuote() {
	fetch('http://swquotesapi.diitaljedi.dk/api/SWQuote/RandomStarWarsQuote')
	.then((quotes) => quotes.json())
	.then((quote) => console.log(quote))
	.catch((error) => console.log(error.message))
}
```
Ao rodar o comando, você receberá um retorno similar a este:
```bash
request to http://swquotesapi.diitaljedi.dk/api/SWQuote/RandomStarWarsQuote failed, reason: getaddrinfo ENOTFOUND swquotesapi.diitaljedi.dk
```

## async/await:
Com a evolução da linguagem, a partir do *ES2017*, surge o ***`async/await`***. Que é uma sintaxe mais confortável de se trabalhar com requisições assíncronas, ela acaba com essa verbosidade da cadeia de vários `.then()` e permite uma sintaxe por linhas, deixando a legibilidade do código mais agradável.

Podemos pegar a função desenvolvida acima com .then() e refatorá-la para async/await, ficando da seguinte maneira:

```javascript
async function SWQuotes() {
	const quotes = await fetch('http://swquotesapi.digitaljedi.dk/api/SWQuote/RandomStarWarsQuote');
	const quote = await quotes.json();
	console.log(quote);
}

SWQuotes()
```

Você pode rodar o `node script.js` e verá que o retorno continua similar ao que tinha antes:

```bash
{
  id: 12,
  starWarsQuote: 'I sense something. A presence I have not felt since…. (A New Hope) - Darth Vader',
  faction: 1
}
```
Entendendo o código acima:
- A declaração ***`async`*** antes da função informa ao script que a função que vem a seguir é de caráter assíncrono e irá aguardar o retorno de algo para prosseguir com sua execução.
- A declaração de ***`await`*** antes do `fetch()` e do tratamento do JSON tem o mesmo significado. Em tradução livre, ***`await`*** pode significar `aguardar`. O que ele faz é informar ao código que, para atribuir o valor a variável quotes e quote, ele deve aguardar a resolução do que está sendo realizado após o ***`await`***.

Agora você deve estar se perguntando como lidar com erros com essa sintaxe. Ai que entra um outro bloco que é o ***`try/catch`***. É uma sintaxe onde o `try` vai ser responsável pelo `sucesso` e o `catch` segue responsável pela `captura do erro`.

```javascript
async function SWQuotes() {
	try {
		const quotes = await fetch('http://swquotesapi.digitaljedi.dk/api/SWQuote/RandomStarWarsQuote');
		const quote = await quotes.json();
  return console.log(quote);
} catch (error) {
		return console.log(error.message);
	}
}

SWQuotes();
```

Ao executar esse código, você irá obter sucesso na requisição e terá como retorno uma mensagem similar a de quando usou o `.then()` ou quando usou o `async/await` sem o `try/catch`, que será:

```bash
{
  id: 53,
  starWarsQuote: 'An object cannot make you good or evil. The temptation of power, forbidden knowledge, even the desire to do good can lead some down that path. But only you can change yourself. — Bendu',
  faction: 2
}
```

Agora se repetirmos o mesmo erro do exemplo da parte do conteúdo de `.catch()`, ***`apagando o g em digital`***, o código ficará assim:

```javascript
async function SWQuotes() {
	try {
		const quotes = await fetch('http://swquotesapi.diitaljedi.dk/api/SWQuote/RandomStarWarsQuote');
		const quote = await quotes.json();
  return console.log(quote);
} catch (error) {
		return console.log(error.message);
	}
}

SWQuotes();
```
Teremos o mesmo retorno de quando usamos o `.catch()` encadeado com as funções `.then()`:
```bash
request to http://swquotesapi.diitaljedi.dk/api/SWQuote/RandomStarWarsQuote failed, reason: getaddrinfo ENOTFOUND swquotesapi.diitaljedi.dk
```

Espero ter ajudadao a compreender melhor um fluxo tão importante no nosso cenário. Mas também entenda que será algo constante nos seus dias, logo, se não compreendeu totalmente, a prática no seu dia-a-dia vai lhe ajudar a absorver o conceito.