回调地狱，不约不约

2018-02-25

回调地狱什么样

大概就是下面这个样——

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))
        }
      })
    })
  }
})

N个回调函数组合成最后一麻麻的})，这就是回调地狱。

回调地狱，不约

扁平化！扁平化！扁平化！

第一版代码👇

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
  })
}

匿名函数起名字，函数声明移出来，biu~变身第一版代码👇

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
}

模块化！模块化！模块化！

把下面这段代码单独放一个文件，比如叫formuploader.js。

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
}

引入一下文件，又变身👇

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

报错！报错！报错！

回调函数的特殊性质，决定了你有时比较难把握，其任务在哪一步发生了错误。因此建议处理每一次可能发生的报错。

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
}

Promise！Generator！Async！

这三者都属于更高级一些的解决方案，不过个人觉得打好基础再奔向高级会比较好一些~

写在最后

总结就是，我们切图仔很忙的，没时间去回调地狱玩。把代码写好，别让自己栽进去，也别让后期开发的小伙伴栽里面~

参考

大鱼的自我成长 — 回调地狱Callback Hell