O que é o inferno dos callbacks? – javascript callback

Pergunta:


Passando por algumas pesquisas recentes, cheguei a um termo desconhecido por mim: “The callback hell” ou “O inferno dos callbacks”.

Fiquei curioso e decidi pesquisar um pouco, chegando ao seguinte trecho de código:

fs.readdir(source, function (err, files) {
  if (err) {
    console.log('Error finding files: ' + err)
  } else {
    files.forEach(function (filename, fileIndex) {
      console.log(filename)
      gm(source + filename).size(function (err, values) {
        if (err) {
          console.log('Error identifying file size: ' + err)
        } else {
          console.log(filename + ' : ' + values)
          aspect = (values.width / values.height)
          widths.forEach(function (width, widthIndex) {
            height = Math.round(width / aspect)
            console.log('resizing ' + filename + 'to ' + height + 'x' + height)
            this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {
              if (err) console.log('Error writing file: ' + err)
            })
          }.bind(this))
        }
      })
    })
  }
})

Por que isso é ruim?

Como posso evitar?

Qual as alternativas para não se cair nesse inferno de callbacks?

Autor da pergunta Artur o Templário

Resposta Anderson Carlos Woss:

O que é o Inferno dos Callbacks

Usando o seu próprio código como exemplo. Podemos ver que o inferno dos callback é definido por essa piramide no final de }). Simplesmente horrível.

Segue o trecho:

            })
          }.bind(this))
        }
      })
    })
  }
})

Como posso evitar?

O único jeito de evitar o inferno dos callbacks é mantendo uma boa prática em seus códigos. Sendo essas práticas

1. Mantenha o Código Limpo e Fácil

Esse é um exemplo de um código que claramente está ruim.

var form = document.querySelector('form')
form.onsubmit = function (submitEvent) {
  var name = document.querySelector('input').value
  request({
    uri: "http://example.com/upload",
    body: name,
    method: "POST"
  }, function (err, response, body) {
    var statusMessage = document.querySelector('.status')
    if (err) return statusMessage.value = err
    statusMessage.value = body
  })
}

Vamos dar nome as functions

var form = document.querySelector('form')
form.onsubmit = function formSubmit (submitEvent) {
  var name = document.querySelector('input').value
  request({
    uri: "http://example.com/upload",
    body: name,
    method: "POST"
  }, function postResponse (err, response, body) {
    var statusMessage = document.querySelector('.status')
    if (err) return statusMessage.value = err
    statusMessage.value = body
  })
}

Dar nome as funções tem benefícios imediatos como:

  • Faz o código facil de ler graças a descrição da função em seus nomes,
    acima temos postResponse e formSubmit, que são auto-explicativos.
  • Quando exceções ocorrerem você irá obter traços mais informativos de
    onde está o problema diretamente nas funções, invés de estranhos
    “anonymous”.
  • Permite referenciar suas funções.

Por fim você pode mover as funções para o topo do programa e dificilmente irá ter problemas com o inferno dos callbacks.

document.querySelector('form').onsubmit = formSubmit

function formSubmit (submitEvent) {
  var name = document.querySelector('input').value
  request({
    uri: "http://example.com/upload",
    body: name,
    method: "POST"
  }, postResponse)
}

function postResponse (err, response, body) {
  var statusMessage = document.querySelector('.status')
  if (err) return statusMessage.value = err
  statusMessage.value = body
}

2. Modularize

Qualquer um que fizer uma correta modularização do código, dificilmente irá ter problema com o inferno dos callbacks.

Criando um arquivo chamado formuploader.js que contém nossas duas functions anteriores, nós podemos usar o module.exports para modularizar tudo:

module.exports.submit = formSubmit

function formSubmit (submitEvent) {
  var name = document.querySelector('input').value
  request({
    uri: "http://example.com/upload",
    body: name,
    method: "POST"
  }, postResponse)
}

function postResponse (err, response, body) {
  var statusMessage = document.querySelector('.status')
  if (err) return statusMessage.value = err
  statusMessage.value = body
}

Em Node.js temos o famoso require, porém também podemos usar esse require no nosso navegador com browserify. Assim temos acesso ao require, podendo assim chamar o módulo que criamos no arquivo formuploader.js e depois utilizando o modulo criado.

var formUploader = require('formuploader')
document.querySelector('form').onsubmit = formUploader.submit

E agora temos duas vantagens vitais. Sendo duas delas:

  • Fácil de ler por novos desenvolvedores
  • formuploader pode ser usado em outros lugares.

3. Evite erros

Com toda certeza erros podem acontecer, você precisa cuidar para que eles não passem pelo código sem você saber onde eles estão. Muitos callbacks são construídos com um argumento que nos ajuda a tratar desses erros.

Por exemplo:

var fs = require('fs')

fs.readFile('/Does/not/exist', handleFile)

function handleFile (error, file) {
     if (error) return console.error('Uhoh, there was an error', error)
     // otherwise, continue on and use `file` in your code
}  

perceba o argumento error sendo tratado em return console.error('Uhoh, there was an error', error) extremamente importante caso ocorra algum problema.

Mais Sobre Callback Hells ou Inferno dos Callbacks

Em vez de callbacks, você pode usar promessas (“promise“). Hoje em dia já podes usar promises com quase tudo. Elas foram criadas para aliviar o callback hell.

Por exemplo, você faz um pedido HTTP para pegar as informações básicas de uma pessoa. Depois disso, pega o id da pessoa e procura pelo endereço usando outro pedido. Depois que a resposta vier, você faz mais outro pedido, usando o endereço da pessoa para pegar o número de compras ou algo assim. Segue o código:

encontrarPessoa()
  .then(response => {
    // Faz alguma coisa depois que pegar os dados básicos da pessoa.
    return pegarEndereco(response.id); // argumento: id da pessoa
  })
  .then(response => {
    // Faz alguma com o endereço obtido.
    return procurarCompras(response.completo); // endereço completo
  })
  .then(response => {
    // Faz alguma coisa com as compras
  })
  .catch(error => {
    // Tem que lidar com os errors aqui
    console.log('Deu problema!', error);
  });

Um detalhe é que as funções que fazem o pedido HTTP acima tem que retornar uma Promise, senão o negócio não funciona. A resposta de encontrarPessoa() retorna uma promessa. Se a promessa for um sucesso (não teve problema), o bloco then vai ser chamado. E aí, quando você retorna uma outra promessa de dentro de um then, o resultado, se der tudo certo, vai pro próximo bloco de then. E assim por diante. Se der algum problema em qualquer uma das respostas, o bloco catch é chamado e você pode lidar com o erro lá.

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *