设为首页 - 加入收藏 ASP站长网(Aspzz.Cn)- 科技、建站、经验、云计算、5G、大数据,站长网!
热搜: 重新 试卷 创业者
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

深入理解 JavaScript 回调函数(2)

发布时间:2019-11-05 12:31 所属栏目:21 来源:疯狂的技术宅
导读:为了在回调的帮助下实现这个功能,代码应该如下所示: http.get('https://api.github.com/users',function(users){ /*Displayallusers*/ console.log(users); http.get('https://api.github.com/repos/javascript/c

为了在回调的帮助下实现这个功能,代码应该如下所示:

  1. http.get('https://api.github.com/users', function(users) { 
  2.   /* Display all users */ 
  3.   console.log(users); 
  4.   http.get('https://api.github.com/repos/javascript/contributors?q=contributions&order=desc', function(contributors) { 
  5.   /* Display all top contributors */ 
  6.     console.log(contributors); 
  7.     http.get('https://api.github.com/users/Jhon', function(userData) { 
  8.     /* Display user with username 'Jhon' */ 
  9.       console.log(userData); 
  10.     }); 
  11.   }); 
  12. }); 

从上面的代码片段中,你可以看到代码变得更加难以理解,以及难以维护和修改。这是由回调函数的嵌套而引发的。

如何避免回调地狱?

可以使用多种技术来避免回调地狱,如下所示。

  1. 使用promise
  2. 借助 async-await
  3. 使用 async.js 库

使用 Async.js 库

让我们谈谈怎样用 async.js 库避免回调地狱。

根据 async.js 官方网站的描述:Async 是一个工具模块,它提供了直接、强大的函数来使用异步 JavaScript。

Async.js 总共提供约 70 个函数。现在,我们将仅讨论其中两个,即 async.waterfall() 和 async.series()。

async.waterfall()

当你要一个接一个地运行某些任务,然后将结果从上一个任务传到下一个任务时,这个函数非常有用。它需要一个函数“任务”数组和一个最终的“回调”函数,它会在“任务”数组中所有的函数完成后,或者用错误对象调用“回调”之后被调用。

  1. var async = require('async'); 
  2. async.waterfall([ 
  3.     function(callback) { 
  4.       /*   
  5.         Here, the first argument value is null, it indicates that 
  6.         the next function will be executed from the array of functions. 
  7.         If the value was true or any string then final callback function 
  8.         will be executed, other remaining functions in the array  
  9.         will not be executed. 
  10.       */ 
  11.         callback(null, 'one', 'two'); 
  12.     }, 
  13.     function(param1, param2, callback) { 
  14.         // param1 now equals 'one' and param2 now equals 'two' 
  15.         callback(null, 'three'); 
  16.     }, 
  17.     function(param1, callback) { 
  18.         // param1 now equals 'three' 
  19.         callback(null, 'done'); 
  20.     } 
  21. ], function (err, result) { 
  22.     /* 
  23.       This is the final callback function. 
  24.       result now equals 'done' 
  25.     */ 
  26. }); 

async.series()

当你要运行一个函数然后在所有函数成功执行后需要获取结果时,它很有用。 async.waterfall() 和 async.series() 之间的主要区别在于, async.series() 不会将数据从一个函数传递到另一个函数。

  1. async.series([ 
  2.     function(callback) { 
  3.         // do some stuff ... 
  4.         callback(null, 'one'); 
  5.     }, 
  6.     function(callback) { 
  7.         // do some more stuff ... 
  8.         callback(null, 'two'); 
  9.     } 
  10. ], 
  11. // optional callback 
  12. function(err, results) { 
  13.     // results is now equal to ['one', 'two'] 
  14. }); 

Javascript 回调与闭包

闭包

用技术术语来说,闭包是捆绑在一起的函数的组合,引用了其周围的状态。

简而言之,闭包允许从内部函数访问外部函数的作用域。

要使用闭包,我们需要在一个函数内部定义另一个函数。然后,我们需要将其返回或传给另一个函数。

回调

从概念上讲,回调类似于闭包。回调基本上是把一个函数作为另一个函数的用法。

最后的话

希望本文能消除你对 javascript 回调函数的所有疑问。如果你觉得这篇文章有帮助,请与他人分享。

(编辑:ASP站长网)

网友评论
推荐文章
    热点阅读