nodejs异步回调造成的困扰

现存在如下图所示的文件目录:
这里写图片描述
我们希望通过02.js来实现能够静态加载static中的文件
这篇博客是我的上一篇博客静态资源管理续篇,在上一篇博客中,因为遇到加载json格式的文件遇到了问题,所以写了一个续篇,如果有感兴趣的小伙伴可以看一下
实现代码如下:

var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');
var server = http.createServer(function (req,res) {
    //这里如果不用req.url来判断,那么不管用户输入什么操作,执行的操作都是一样的
    //得到地址
    var pathname = url.parse(req.url).pathname;

    //不处理小图标的请求
    if(pathname == '/favicon.ico'){
        return;
    }
   //判断此时用户输入的是文件地址还是文件夹地址
    //如果是文件夹地址,那么自动请求这个文件夹中的index.html
    if(pathname.indexOf('.') == -1){
        pathname  += 'index.html';
    }
    //得到用户输入的文件的拓展名
    var extname = path.extname(pathname);
    console.log(pathname);
    fs.readFile('./static/'+pathname,function (err,data) {
        if(err){

            //如果页面报错,则让它返回一个新的页面
            fs.readFile('./static/404.html',function (err,data) {
                res.writeHead(200,{'Content-Type':'text/html;charset=UTF8'});
                res.end(data);
            })
            return;
        }
        //读完文件之后做的事情
        console.log(process.cwd());
        var mime = getMime(extname);
        res.writeHead(200,{'Content-Type':mime+';charset=UTF8'});
        res.end(data);
    })
}).listen(80,'127.0.0.1');
function getMime(extname) {
    //读取mime.josn文件,得到JOSN,根据extname key ,f返回对应的value值

   switch (extname){
       case '.html':
           return 'text/html';
           break;
       case '.css':
           return 'text/css';
           break;
       case '.img':
           return 'image/img';
           break;
       case '.json':
           fs.readFile('./static/mime.json',function (err,data) {
              if(err){
                  throw Error("找不到mime.json文件!");
                  return;
              }
              //转成JSON
               console.log(typeof data);
              //利用json.parse将一个josn字符串解析成为json格式
               var mimeJSON = JSON.parse(data);
               console.log(mimeJSON[extname]);
              return mimeJSON[extname];
          })
   }
}

当我们读取到文件的扩展名为json时,我们读取这个json格式的文件,然后利用JSON.parse()的方法将JSON字符串转化为JSON对象,然后在这个JSON对象中取到对应json扩展名的MIME类型。
可是,我们却惊讶的发现响应头中的content-type类型是undefined,
这里写图片描述
可是我们不是已经在代码的这个地方书写了文件类型吗?
这里写图片描述
这是因为getMime()函数,当其中传入的参数为‘.json’,函数执行代码包含异步操作,即读取这个json文件,所以,当文件还未读取完毕,mime还未赋值时,mime就已经被写入content-type中,也就是undefined;
那我们该怎么做?
我们采取给getMime强行加一个回调函数,当传入文件的拓展名之后再执行回调函数中的内容,将mime的值赋给content-type,这样就可以避免异步加载的问题。
现将代码修改如下:

getMime(extname,function(mime){
      res.writeHead(200,{'Content-Type':mime+';charset=UTF8'});
      res.end(data);
})

这样等到参数mime的值返回之后我们才能执行将类型值赋给Content-type的操作。对应的getMime()函数也要进行对应修改:

function getMime(extname,callback){
  //读取mime的json文件,将对应扩展名的MIME类型名返回
  fs.readfile('./static/mime.json',function(err,data){
    if(err){
        throw Error('找不到mime.json类型的文件!');
   }
     //将json字符串转换为json对象
        var mimeJSON = JSON.parse(data);
        var mime = mimeJSON[extname] || 'text/plain
        ';
        callback(mime);
 })
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值