如何避免地狱回调？

2019-03-20

提问

如何避免以下这种地狱回调的情况？

getData(function(a) {
  getMoreData(a, function(b) {
    getMoreData(b, function(c) {
      getMoreData(c, function(d) {
        getMoreData(d, function(e) {
          // ...
        })
      })
    })
  })
})

回答

重构返回 promises 的函数，使用最佳的 async/await 进行替换。替代回调函数导致的深层次嵌套，async/await 返回一个可以 await 的 promise，当异步数据返回后才允许以同步的方式执行下一行代码。

以上的代码可以如下进行重构：

async function asyncAwaitVersion() {
  const a = await getData()
  const b = await getMoreData(a)
  const c = await getMoreData(b)
  const d = await getMoreData(c)
  const e = await getMoreData(d)
  // ...
} 

加分回答

• 有很多方法可以解决此类回调地狱的问题：
  • 模块化：将回调分解为独立的函数
  • 使用第三方库，如 async
  • 使用带有 Promise 的生成器
  • 从 v7 开始使用 async/await
• 作为一个有能力的 JavaScript 开发人员，我们必须避免不断增长的缩进，使用干净且可读的代码来处理复杂的流程。

返回总目录

30 秒面试系列一