Search code examples
javascriptdesign-patternspromisees6-promise

Modular promises and Promise.all()


I have a bunch of functions that return promises that I want to make generalized, and so I write them like this:

function checkWebpageForReference(data){
    //checks a webpage for the reference in html
    var promise = new Promise(function(resolve,reject){
        fetchUrl(data.url, function(err, meta, body){
            if (err) { reject(err); } else {
                console.log(body)
                if (body.toString().indexOf(data.text) !== -1){
                    resolve(data);
                } else {
                    reject("Could not find quote");
                }
            }
        });
    });
    return promise;
}

function takeScreenshot(data){
    //takes a screenshot of a webpage and saves it to the file system
    //TODO: Mouse coordinates
    data.id = shortid.generate();
    data.filename = data.id+'.png';
    var promise = new Promise(function(resolve,reject){
        webshot(data.url, data.filename, { shotOffset: {left: data.mouseX, top: data.mouseY} }, function(err) {
            if (err) { reject(err); } else {
                resolve(data);   
            }
        });
    });
    return promise;
}

function uploadReferencePictureToS3(data){
    //uploads a picture to S3
    var promise = new Promise(function(resolve, reject){
        s3.putObject({
            ACL: 'public-read',
            Bucket: S3_BUCKET,
            Key: data.id,
            Body: data.picturedata,
            ContentType: "image/jpg"
        }, function(err) {
            if (err) { reject(err); } else {
                resolve(data);   
            }
        }); 
    });
    return promise;
}

function saveNewReferenceToDb(data){
    //saves a new Reference to the database
    var promise = new Promise(function(resolve, reject){
        new Reference({
            _id: data.id,
            url: data.url,
            text: data.text,
            screenshot_url: AWS_S3_URL + data.id,
            created_by: "Daniel"
        }).save(function(err, saved){
            if (err) { reject(err); } else {
                data.newReference = saved;
                resolve(data);   
            }
        });
    });
    return promise;
}

function readFile(data){
    //reads a file from the file structure and stores it in a variable
    var promise = new Promise(function(resolve,reject){
        console.log(data);
        fs.readFile(data.filename, function(err, picturedata){
            console.log(picturedata);
            if (err) { reject(err); } else {
                data.picturedata = picturedata;
                resolve(data);   
            }
        }) ;
    });
    return promise;
}

function deleteFile(data){
    //deletes a file from the file structure
    var promise = new Promise(function(resolve, reject){
        fs.unlink(data.filename);
        resolve(data);
    });
    return promise;
}

I resolve data in each function because I plan to have a lot of these types of functions, and I don't know the order they'll be called in while chaining:

readfile(somedata)
.then(upload)
.then(delete)
.then(save)
//etc

This works fine until I have to do Promise.all:

   Promise.all([
        referenceTools.checkWebpageForReference(req.body),
        referenceTools.takeScreenshot(req.body)
    ])
    .then(function(results){
        utils.readFile(results[1])
        .then(referenceTools.uploadReferencePictureToS3)
        .then(utils.deleteFile)
        .then(referenceTools.saveNewReferenceToDb)
        .then(function(data){
            res.json(data.newReference);
        })
        .catch(function(err){
            utils.errorHandler(err);
            res.send("There was an internal error. Please try again soon.");
        });  
    })
    .catch(function(err){
        utils.errorHandler(err);
        res.send("There was an internal error. Please try again soon.");
    });
    //my very ugly way of doing it

Using Promise.all().then(upload) gives me errors, because the new promise returned by Promise.all() is an object that contains both resolutions from checkWebpageForReference and takeScreenshot. Essentially, in readFile, I can't access data fields because the resulting promise is [data, data].

Is there a pattern I can follow to help me achieve what I need to do? I need to make the promises modular providing them with as much data as possible.


Solution

  • You can .map() over them like so:

    Promise.all(...)
      .then(datas => Promise.all(datas.map(upload)));
    

    Since you're on the server side, I highly recommend Bluebird as a drop-in replacement for native Promises. Then you can do:

    Promise.all(...)
      .map(upload);