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
for
da linguagem é muito mais simples e não tem problema algum., provavelmente até oreaddir
não precisaria disto, mas se usar só ele não causa o problema relatado. Claro que tem vantagem em casos específicos, não o abuso. Quase sempre umforEach()
é um erro.