Node.js 异步编程之 Callback介绍(一)


Posted in Javascript onMarch 30, 2015

Node.js 基于 JavaScript 引擎 v8,是单线程的。Node.js 采用了与通常 Web 上的 JavaScript 异步编程的方式来处理会造成阻塞的I/O操作。在 Node.js 中读取文件、访问数据库、网络请求等等都有可能是异步的。对于 Node.js 新人或者从其他语言背景迁移到 Node.js 上的开发者来说,异步编程是比较痛苦的一部分。本章将由浅入深为大家讲解 Node.js 异步编程的方方面面。从最基础的 callback 到 thunk、Promise、co 直到 ES7 计划的 async/await。

首先我们先从一个具体的异步编程的例子说起。

获取多个 ip 所在地的天气信息

在 ip.json 这个文件中,有一个数组我们存放了若干个 ip 地址,分别来自不同的地方的不同访问者,内容如下:

// ip.json

["115.29.230.208", "180.153.132.38", "74.125.235.224", "91.239.201.98", "60.28.215.115"]

希望可以每一个 ip 所在地当前的天气。将结果输出到 weather.json 这个文件中各式如下:
// weather.json

[

  { "ip": "115.29.230.208", "weather": "Clouds", "region": "Zhejiang" },

  { "ip": "180.153.132.38", "weather": "Clear", "region": "Shanghai" },

  { "ip": "74.125.235.224", "weather": "Rain", "region": "California" },

  { "ip": "60.28.215.115", "weather": "Clear", "region": "Tianjin" }

]

整理思路,我们分成以下几步来完成:

1.读取 ip 地址;
2.根据 ip 地址获取 ip 所在地的地理位置;
3.根据地理位置查询当地的天气;
4.将结果写入到 weather.json 文件中。

这些步骤都是异步的(读写文件可以同步,但作为示例,都用异步)。

callback

首先我们尝试不借助任何库,试着以 Node.js API 通常提供的方式——专递一个 callback 作为异步回调——来实现。我们将借助三个基础模块:

1.fs:从文件 ip.json 读取 IP 列表;把结果写入到文件中;
2.request:用来发送 HTTP 请求,根据 IP 地址获取 geo 数据,再通过 geo 数据获取天气数据;
3.querystring:用来组装发送请求的 url 参数。

新建一个 callback.js 文件,引入这几个模块:

// callback.js

var fs = require('fs')

var request = require('request')

var qs = require('querystring')

读取文件中的 IP 列表,调用 fs.readFile 读取文件内容,再通过 JSON.parse 来解析 JSON 数据:

...

function readIP(path, callback) {

  fs.readFile(path, function(err, data) {

    if (err) {

      callback(err)

    } else {

      try {

        data = JSON.parse(data)

        callback(null, data)

      } catch (error) {

        callback(error)

      }

    }

  })

}

...

接着就是使用 IP 来获取geo,我们使用 request 来请求一个开放的 geo 服务:

...

function ip2geo(ip, callback) {

  var url = 'http://www.telize.com/geoip/' + ip

  request({

    url: url,

    json: true

  }, function(err, resp, body) {

    callback(err, body)

  })

}

...

使用 geo 数据来获取 weather:

...

function geo2weather(lat, lon, callback) {

  var params = {

    lat: lat,

    lon: lon,

    APPID: '9bf4d2b07c7ddeb780c5b32e636c679d'

  }

  var url = 'http://api.openweathermap.org/data/2.5/weather?' + qs.stringify(params)

  request({

    url: url,

    json: true,

  }, function(err, resp, body) {

    callback(err, body)

  })

}

...

现在我们已经获取 geo、获取 weather 的接口,接下来我们还有稍微复杂的问题要处理,因为 ip 有多个,所以我们需要并行地去读取 geo 已经并行地读取 weather 数据:
...

function ips2geos(ips, callback) {

  var geos = []

  var ip

  var remain = ips.length

  for (var i = 0; i < ips.length; i++) {

    ip = ips[i];

    (function(ip) {

      ip2geo(ip, function(err, geo) {

        if (err) {

          callback(err)

        } else {

          geo.ip = ip

          geos.push(geo)

          remain--

        }

        if (remain == 0) {

          callback(null, geos)

        }

      })

    })(ip)

  }

}
function geos2weathers(geos, callback) {

  var weathers = []

  var geo

  var remain = geos.length

  for (var i = 0; i < geos.length; i++) {

    geo = geos[i];

    (function(geo) {

      geo2weather(geo.latitude, geo.longitude, function(err, weather) {

        if (err) {

          callback(err)

        } else {

          weather.geo = geo

          weathers.push(weather)

          remain--

        }

        if (remain == 0) {

          callback(null, weathers)

        }

      })

    })(geo)

  }

}

...

ips2geos 和 geos2weathers 都使用了一种比较原始的方法,remain 来计算等待返回的个数,remain 为 0 表示并行请求结束,将处理结果装进一个数组返回。

最后就是将结果写入到 weather.json 文件中:

...

function writeWeather(weathers, callback) {

  var output = []

  var weather

  for (var i = 0; i < weathers.length; i++) {

    weather = weathers[i]

    output.push({

      ip: weather.geo.ip,

      weather: weather.weather[0].main,

      region: weather.geo.region

    })

  }

  fs.writeFile('./weather.json', JSON.stringify(output, null, '  '), callback)

}

...

组合上面这些函数,我们就可以实现我们的目标:

...

function handlerError(err) {

  console.log('error: ' + err)

}
readIP('./ip.json', function(err, ips) {

  if (err) {

    handlerError(err)

  } else {

    ips2geos(ips, function(err, geos) {

      if (err) {

        handlerError(err)

      } else {

        geos2weathers(geos, function(err, weathers) {

          if (err) {

            handlerError(err)

          } else {

            writeWeather(weathers, function(err) {

              if (err) {

                handlerError(err)

              } else {

                console.log('success!')

              }

            })

          }

        })

      }

    })

  }

})

哈哈,你妈这嵌套,你可能觉得这就是 JavaScript 异步的问题,说真的,嵌套不是 JavaScript 异步的真正问题所在。上面这段代码我们可以下面这样写:

...

function ReadIPCallback(err, ips) {

  if (err) {

    handlerError(err)

  } else {

    ips2geos(ips, ips2geosCallback)

  }

}
function ips2geosCallback(err, geos) {

  if (err) {

    handlerError(err)

  } else {

    geos2weathers(geos, geos2weathersCallback)

  }

}
function geos2weathersCallback(err, weathers) {

  if (err) {

    handlerError(err)

  } else {

    writeWeather(weathers, writeWeatherCallback)

  }

}
function writeWeatherCallback(err) {

  if (err) {

    handlerError(err)

  } else {

    console.log('success!')

  }

}
readIP('./ip.json', ReadIPCallback)

好了,这是我们 callback.js 的全部内容。运行:

node callback.js

将会生成 weater.json 文件:
[

  {

    "ip": "180.153.132.38",

    "weather": "Clear",

    "region": "Shanghai"

  },

  {

    "ip": "91.239.201.98",

    "weather": "Clouds"

  },

  {

    "ip": "60.28.215.115",

    "weather": "Clear",

    "region": "Tianjin"

  },

  {

    "ip": "74.125.235.224",

    "weather": "Clouds",

    "region": "California"

  },

  {

    "ip": "115.29.230.208",

    "weather": "Clear",

    "region": "Zhejiang"

  }

]

那正真的问题是什么?

当然是异步的问题啦,异步本质上要处理三个事情:

1.异步操作什么时候结束,需要通知回来,Callback 是一种方案;
2.异步产生的结果需要传递回来,Callback 接受一个 data 参数,把数据传回来;
3.异步如果出错了怎么办?Callback 接受 一个 err 参数,把错误传回来。

但有没有发现好多重复的工作(各种 callback)?上面的这些代码有什么问题么?请大家期待本文的续篇。

Javascript 相关文章推荐
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 #Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 #Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 #Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 #Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 #Javascript
javascript实现控制浏览器全屏
Mar 30 #Javascript
原生JavaScript编写俄罗斯方块
Mar 30 #Javascript
You might like
PHP中常用数组处理方法实例分析
2008/08/30 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
Python contextlib模块使用示例
2015/02/18 Python
Python随机生成彩票号码的方法
2015/03/05 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
护理职业生涯规划书
2014/01/24 职场文书
科研先进个人典型材料
2014/01/31 职场文书
高一军训决心书
2015/02/05 职场文书
2015年项目工作总结
2015/04/29 职场文书
物业公司管理制度
2015/08/05 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript