API Fetch

A API Fetch fornece uma interface JavaScript para acessar e manipular requisições e respostas HTTP. Ela também fornece o método global fetch(), que fornece uma maneira fácil e lógica para buscar recursos de forma assíncrona através da rede. Esse tipo de funcionalidade era obtida anteriormente utilizando XMLHttpRequest(que ainda pode ser usada!). As mais novas versões dos navegadores já suportam esse tipo de funcionalidade.

A principal diferença é que a API Fetch usa o Promises, que permite uma API mais simples e mais limpa, evitando o callback hell e tendo que lembrar a complexa API do XMLHttpRequest. Quando usamos JavaScript assíncrono que utiliza callbacks, a legibilidade do código fica bem confusa quando temos vários callbacks! Isso é o chamado callback hell. Veja um exemplo abaixo:

const verifyUser = function(username, password, callback){
   dataBase.verifyUser(username, password, (error, userInfo) => {
       if (error) {
           callback(error)
       }else{
           dataBase.getRoles(username, (error, roles) => {
               if (error){
                   callback(error)
               }else {
                   dataBase.logAccess(username, (error) => {
                       if (error){
                           callback(error);
                       }else{
                           callback(null, userInfo, roles);
                       }
                   })
               }
           })
       }
   })
};

Notou essa forma piramidal? Consequência de inúmeros callbacks, chamada de callback hell!

Vamos primeiro entender o que são Promises no contexto da linguagem Javascript, parte essencial para posteriormente utilizarmos a API Fetch.