Reading and returning multiple files in Node.js using fs.readFile

Question

I'm writing a simple request handler to return a pair of css files. Using fs.readFileSync this was easy. However, I'm having difficulty accomplishing the same task using the async version of readFile. Below is my code. Having my response.write() method calls split among two different callbacks seems to be problematic. Can someone point out what I've done wrong? Interestingly this code works if I put response.end() inside of the first else statement. However, that creates a problem in that the second css file does not get returned (because response.end() has already been fired).

function css(response) {

  response.writeHead(200, {"Content-Type": "text/css"});

  fs.readFile('css/bootstrap.css', function(error, content){
    if(error){
      console.log(error);
    }
    else{
      response.write(content);
    }
  });
  fs.readFile('css/bootstrap-responsive.css', function(error, content){
    if(error){
      console.log(error);
    }
    else{
      response.write(content)
    }
  });
  response.end();
}

Answer 1

const fs = require('fs');

function readFilePromise(fileName) {
    return new Promise(function (resolve, reject) {
        fs.readFile(fileName, 'utf-8', function(err, data){
            if(err){reject(err)} else {
                resolve(data)
            }
        })
    })
}

Promise.all([readFilePromise("abc.txt"), readFilePromise("dec.txt")]).then(function(out){
    console.log(out)
})

Answer 2

You can simply rely on html5 Promise. The code can be as simple as follows:

var promises= ['file1.css', 'file2.css'].map(function(_path){
    return new Promise(function(_path, resolve, reject){
        fs.readFile(_path, 'utf8', function(err, data){
            if(err){
               console.log(err);
               resolve("");    //following the same code flow
            }else{
               resolve(data);
            }
        });
    }.bind(this, _path));
});

Promise.all(promises).then(function(results){
    //Put your callback logic here
    response.writeHead(200, {"Content-Type": "text/css"});
    results.forEach(function(content){response.write(content)});
    response.end();
});

Answer 3

Async is an awesome lib. However the standard for these things is moving in the direction of promises for handling multiple asynchronous operations. In fact in ECMAScript6 this will be a standard part of the library. There are several libraries that implement promises including JQuery. However, for node, I like to use 'q'

Here is the same code using promises: One note.. you might want to move the first writeHead call to coincide with the first successful read.

var Q = require('q');

function css(response) {
   response.writeHead(200, {"Content-Type": "text/css"});
   var defer = Q.defer(); 
   fs.readFile('css/bootstrap.css', function(error, content){
         if(error){

           defer.reject(error)
        }
        else{
         response.write(content);
         defer.resolve();
       }
   });
   defer.promise.then(function() { //this gets executed when the first read succeeds and is written
         var secondDefer = Q.defer();
         fs.readFile('css/bootstrap-responsive.css', function(error, content){
            if(error){
              secondDefer.reject(error);
           }
           else{
               response.write(content);
               secondDefer.resolve();
           }
        });
        return secondDefer.promise;
   },
   function(error) { //this gets called when the first read fails
       console.log(error);
        //other error handling
   }).
   done(function() {
        response.end();
   }, 
   function(error) { //this is the error handler for the second read fails
        console.log(error);
         response.end(); //gotta call end anyway
   });

}

Answer 4

The primary issue with what you have is that response.end() gets called right away. You need to only call it after the files have done their response.write calls.

The easiest way would be to use a control flow library. Managing multiple asynchronous callbacks is generally complicated.

https://github.com/joyent/node/wiki/modules#wiki-async-flow

I'm going to use the async library because it's the one I know best.

var fs = require('fs');
var async = require('async');

function css(response) {
  response.writeHead(200, {"Content-Type": "text/css"});

  async.eachSeries(
    // Pass items to iterate over
    ['css/bootstrap.css', 'css/bootstrap-responsive.css'],
    // Pass iterator function that is called for each item
    function(filename, cb) {
      fs.readFile(filename, function(err, content) {
        if (!err) {
          response.write(content);
        }

        // Calling cb makes it go to the next item.
        cb(err);
      });
    },
    // Final callback after each item has been iterated over.
    function(err) {
      response.end()
    }
  );
}

If you want to accomplish this without a library, or just want another way, this is how I would do it more directly. Basically you keep a count and call end once both file reads have finished.

function css(response) {
  response.writeHead(200, {"Content-Type": "text/css"});

  var count = 0;
  var handler = function(error, content){
    count++;
    if (error){
      console.log(error);
    }
    else{
      response.write(content);
    }

    if (count == 2) {
      response.end();
    }
  }

  fs.readFile('css/bootstrap.css', handler);
  fs.readFile('css/bootstrap-responsive.css', handler);
}

Answer 5

There's a simple common solution to get them all with an one callback. You can place it anywhere in your project to reuse in many different cases.

var FS = require('fs');

/**
 * Abstract helper to asyncly read a bulk of files
 * Note that `cb` will receive an array of errors for each file as an array of files data
 * Keys in resulting arrays will be the same as in `paths`
 *
 * @param {Array} paths - file paths array
 * @param {Function} cb
 *   @param {Array} errors - a list of file reading error
 *   @param {Array} data - a list of file content data
 */
function FS_readFiles (paths, cb) {
    var result = [], errors = [], l = paths.length;
    paths.forEach(function (path, k) {

        FS.readFile(path, function (err, data) {
            // decrease waiting files
            --l;
            // just skip non-npm packages and decrease valid files count
            err && (errors[k] = err);
            !err && (result[k] = data);
            // invoke cb if all read
            !l && cb (errors.length? errors : undef, result);
        });

    });
}

Just put inside it a bulk of files and it will returns to you each of them as a buffer. Simple example:

var cssFiles = [
   'css/bootstrap.css',
   'css/bootstrap-responsive.css'
];

function css(response) {
    FS_readFiles(cssFiles, function (errors, data) {
        response.writeHead(200, {"Content-Type": "text/css"});
        data.forEach(function (v) {
            response.write(v);
        });
        response.end();
    });
}

Offtopic: Btw, requests like this you better to cache on front-end proxy server like nginx or varnish. It's never change.