express的中间件bodyParser详解,详谈nodejs异步编程

bodyParser用于解析客户端请求的body中的内容,内部使用JSON编码处理,url编码处理以及对于文件的上传处理.

代码很简单,常见的图片格式均已加入验证之中,小伙伴们可以直接拿去用的。

目前需求中涉及到大量的异步操作,实际的页面越来越倾向于单页面应用。以后可以会使用backbone、angular、knockout等框架,但是关于异步编程的问题是首先需要面对的问题。随着node的兴起,异步编程成为一个非常热的话题。经过一段时间的学习和实践,对异步编程的一些细节进行总结。

下面是一个文件上传的例子.

废话少说,直接上代码

1.异步编程的分类

建立一个1.html页面

复制代码 代码如下:

    
解决异步问题方法大致包括:直接回调、pub/sub模式(事件模式)、异步库控制库(例如async、when)、promise、Generator等。
1.1 回调函数

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“”>
  <html xmlns=””>
  <head>
  <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
  <script src=”jquery-1.7.1.min.js”
type=”text/javascript”></script>
  <script type=”text/javascript”>
  $(document).ready(function(){
  $(“#form01”).change( function(){
  var filepath=$(“input[name=’myFile’]”).val();
  var extStart=filepath.lastIndexOf(“.”);
  var ext=filepath.substring(extStart,filepath.length).toUpperCase();
  if(ext!=”.BMP”&&ext!=”.PNG”&&ext!=”.GIF”&&ext!=”.JPG”&&ext!=”.JPEG”){
  alert(“图片限于bmp,png,gif,jpeg,jpg格式”);
  return false;
  }else{$(“#name01”).text(ext)}
  var file_size = 0;
  if ( $.browser.msie) {
  var img=new Image();
  img.src=filepath;
  while(true){
  if(img.fileSize > 0){
  if(img.fileSize>3*1024*1024){
  alert(“图片不大于100MB。”);
  }else{
  var num03 = img.fileSize/1024;
  num04 = num03.toFixed(2)
  $(“.size02″).text(num04+”KB”);
  }
  break;
  }
  }
  } else {
  file_size = this.files[0].size;
  console.log(file_size/1024/1024 + ” MB”);
  var size = file_size / 1024;
  if(size > 10240){
  alert(“上传的文件大小不能超过10M!”);
  }else{
  var num01 = file_size/1024;
  num02 = num01.toFixed(2)
  $(“#size01″).text(num02 + ” KB”);
  }
  }
  return true;
  });
  });
  </script>
  <title>无标题文档</title>
  </head>
  <body>
  <table width=”500″ cellspacing=”0″ cellpadding=”0″>
  <tr>
  <td width=”72″ id=”name01″> </td>
  <td width=”242″><input type=”file” name=”myFile” id=”form01″
/></td>
  <td width=”184″ id=”size01″ class=”size02″> </td>
  </tr>
  </table>
  </body>
  </html>

     
回调函数是常用的解决异步的方法,经常接触和使用到,易于理解,并且在库或函数中非常容易实现。这种也是大家接使用异步编程经常使用到的方法。

 <!DOCTYPE html>
 <html>
 <head lang=”en”>
     <meta charset=”UTF-8″>
     <title>向服务器上传文件</title>
     <script type=”text/javascript”>       
         function uploadFile(){
             var formData=new FormData();
             var files=document.getElementById(“files”).files;
             var file=files[0];
             formData.append(“myfile”,file);
             var xhr=new XMLHttpRequest();
             xhr.open(“post”,”index.html”,true);
             xhr.onload= function (e) {
                 if(this.status==200)
                    
document.getElementById(“result”).innerHTML=this.response;
             };
             xhr.send(formData);
         }
     </script>
 </head>
 <body>
 请选择文件:<input type=”file” id=”files” name=”file” />
 <input type=”button” value=”上传文件” onclick=”uploadFile();”
/>
 <div id=”result”></div>
 </body>
 </html>

以上代码超级简单,小伙伴们使用的时候自己记得美化下,这里就不多做解释了。

      但是回调函数的方式存在如下的问题:

上面的XMLHttpRequest对象与FormData对象时HTML5中的内容,不作重点讲解.用这两个对象可以将用户选取的文件上传到服务器端,.

您可能感兴趣的文章:

  • jQuery获取file控件中图片的宽高与大小
  • 基于jQuery的图片大小自动适应实现代码
  • 基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
  • jquery预览图片实现鼠标放上去显示实际大小
  • jQuery实现的上传图片本地预览效果简单示例
  • 简单实现jQuery上传图片显示预览功能
  • JQuery Jcrop
    实现图片裁剪的插件
  • jquery实现图片上传前本地预览功能
  • 基于Jquery的简单图片切换效果
  • 使用jquery获取网页中图片高度的两种方法
  • jQuery实现判断上传图片类型和大小的方法示例

     1. 可能形成万恶的嵌套金字塔,代码不易阅读;

在服务器端使用了app.use(express.bodyParser())中间件之后,代表客户端请求的http.IncomingMessage,也就是res对象就具有了一个files属性.

     2. 只能对应一个回调函数,在很多场景中成为一个限制。

server.js端代码:

1.2 pub/sub模式(事件)

复制代码 代码如下:

    
该模式也称为事件模式,是回调函数的事件化,在jQuery等类库中非常常见。

 var express=require(“express”);
 var fs=require(“fs”);
 var app=express();
 app.use(express.bodyParser());
 app.get(“/index.html”, function (req,res) {
     res.sendfile(__dirname+”/1.html”);
 });
 app.post(“/index.html”, function (req,res) {
     var file=req.files.myfile;
     fs.readFile(file.path, function (err,data) {
         if(err) res.send(“读文件操作失败”);
         else{
             fs.writeFile(file.name,data, function (err) {
                 if(err) res.send(“写文件操作失败.”);
                 else res.send(“文件上传成功”);
             })
         }
     });
 });
 
 
 app.listen(1337,”127.0.0.1″, function () {
     console.log(“开始监听”);
 });

    
事件发布订阅者模式本身并无同步与异步调用的问题,但是在node中,emit调用多半是伴随事件循环而异步触发的。该模式常用来解耦业务逻辑,事件发布者无须关注注册的回调函数,也不用关注回调函数的个数,数据通过消息的方式可以很灵活的传递。

启动服务器后,运行浏览器:

     该模式的好处是:1. 便于理解;2. 不再局限于一个回调函数。

图片 1

     不好的地方时:1. 需要借助类库; 2.事件与回调函数的顺序很重要

选择文件:

复制代码 代码如下:

图片 2

var img = document.querySelect(#id);
img.addEventListener(‘load’, function() {
  // 图片加载完成
    ……
});
img.addEventListener(‘error’, function() {
  // 出问题了
  ……
});

在浏览器端出现了 上传成功字样,

  上述代码存在两个问题:

在服务器端也有了我们上传的文件.

      a.
img实际已经加载完成,此时才绑定load回调函数,结果回调不会执行,但依然希望执行该对应回调函数。

图片 3

复制代码 代码如下:

点击上传后:

var img = document.querySelect(#id);
function load() {
  …
}
if(img.complete) {
  load();
} else {
  img.addEventListener(‘load’, load);
}
img.addEventListener(‘error’, function() {
  // 出问题了
  ……
});

另外bodyParse可以接受客户端ajax提交的json数据,以及url的处理.

   b. 无法很好处理存在异常

您可能感兴趣的文章:

  • 详解express与koa中间件模式对比
  • node.js中express中间件body-parser的介绍与用法详解
  • Nodejs中Express 常用中间件 body-parser
    实现解析
  • node.js
    中间件express-session使用详解
  • 深入理解nodejs中Express的中间件
  • nodejs开发——express路由与中间件
  • express文件上传中间件Multer详解
  • express的中间件cookieParser详解
  • express的中间件basicAuth详解
  • 浅谈express
    中间件机制及实现原理

     
结论:事件机制最适合处理同一个对象上反复发生的事情,不需要考虑当绑定回调函数之前事件发生的情况。

1.3 异步控制库

      目前的异步库主要有Q、when.js、win.js、RSVP.js等。

      这些库的特点是代码是线性的,可以从上到下完成书写,符合自然习惯。

      不好的地方也是风格各异,不便于阅读,增加学习成本。

1.4 Promise

    
Promise翻译成中文为承诺,个人理解是异步完成之后,就会给外部一个结果(成功或失败),并承诺结果不再发生改变。换句话就是Promise反应了一个操作的最终返回结果值(A
promise represents the eventual value returned from the single
completion of an
operation)。目前Promise已经引入到ES6规范里面,Chrome、firefox等高级浏览器已经在内部实现了该原生方法,使用起来相当方便。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图