Completing one task before undertaking another using promises

Question

I am working in VueJS. I have a simple form, where I have a file input plus one more field.

<form @submit.prevent="formSubmit()">
    <div class="card-body">
        <div class="form-group">
            <label for="someName">Some Name</label>
            <input type="text" class="form-control" id="someName"
                   placeholder="someName" v-model="form.someName">
        </div>
        <div class="form-group">
            <label for="uploadedFile">Data</label>
            <input type='file' ref="file" @change='handleCSVUpload' accept=".csv"
                   id="uploadedFile">
        </div>
    </div>
    <button class="btn btn-success">Submit</button>
</form>

So what I want to do is as soon as I add a file, I want to assign it to a data variable. As such, I have the @change which triggers this

export default {
    data() {
        return {
            csvFile: '',
            parsedData: '',
            form: new Form({
                someName: ''
            })
        }
    },
    methods: {
        handleCSVUpload() {
            this.csvFile = this.$refs.file.files[0];
        }
    }
}

This is all fine. My problem comes next. When the form is submitted, I want to firstly parse this file to JSON. Once this is done, I then want to submit this JSON to the backend along with the other form field. At the moment I have this

import Papa from 'papaparse';

export default {
    data() {
        return {
            csvFile: '',
            parsedData: '',
            form: new Form({
                someName: ''
            })
        }
    },
    methods: {
        handleCSVUpload() {
            this.csvFile = this.$refs.file.files[0];
        },
        formSubmit() {
            this.$Progress.start();

            this.processCSVFile(this.csvFile);

            this.form.post('api/upload').then(() => {
                this.$Progress.finish();
            }).catch(() => {
                this.$Progress.fail();
            })
        },
        processCSVFile(csv) {
            let file = csv;
            let config = {
                delimiter: "",
                newline: "",
                quoteChar: '"',
                escapeChar: '"',
                header: true
            };

            Papa.parse(file, {
                config: config,
                error: function (err, file) {
                    console.log("ERROR:", err, file);
                    return err;
                },
                complete: function (results) {
                    this.parsedData = JSON.stringify(results.data);
                    console.log(this.parsedData)
                }
            });
        }
    }
}

This all works fine, but not really satisfied with it. Within the formSubmit method I call this.processCSVFile(this.csvFile); However, I then go straight into posting the data to the backend. Instead, I need to make sure that the parsing is okay, because if not, I need to display an error and not submit anything. Now the following is incorrect, but it shows my thinking

this.processCSVFile(this.csvFile).then(() => {
  this.form.post('api/upload').then(() => {
    this.$Progress.finish();
  }).catch(() => {
    this.$Progress.fail();
  })

So it should process the CSV file, if this is successful, then submit to the api. However, not sure how to do these multiple promises? Also not too sure what I should be returning or doing within the processCSVFile function?

Any advice appreciated

Thanks

Answer 1

What you want to do here is have processCSVFile return a Promise.

You can do this by wrapping the call to Papa.parse in a new Promise. For example

processCSVFile (csv) {
  let config = { ... } // no change here
  return new Promise((resolve, reject) => {
    Papa.parse(csv, {
      config,
      error: (err, file) => {
        console.error(err, file)
        reject(err)
      },
      complete: results => {
        resolve(JSON.parse(results.data))
      }
  })
}

Now you can do exactly what you wanted in your submit handler...

this.processCSVFile(this.csvFile).then(parsedData => {
  this.parsedData = parsedData // you could also do this in processCSVFile
  // note the "return" here so control will bubble up the promise chain
  return this.form.post('api/upload')
}).then(() => {
  this.$Progress.finish();
}).catch(() => {
  // This will catch any failures in "processCSVFile" and / or "this.form.post"
  this.$Progress.fail();
})

Answer 2

The first issue here is that your processCSVFile function does not return a Promise. Unfortunately, the Papa Parse functions "[don't] return anything. Results are provided asynchronously to a callback function." But since they take callbacks you can easily wrap the call in a Promise like so:

processCSVFile(csv) {
  let config = {...};
  return new Promise((resolve, reject) => {
      Papa.parse(csv, {
        config: config,
        error: reject,
        complete: (results) => {
          this.parsedData = JSON.stringify(results.data);
          resolve(this.parsedData);
        }
      });
    });
}

One of the nice things about the Promise API is the fact that it can be easily chained. In particular, from any Promise handler, you can return a Promise instead of a specific result. So in your code above:

this.processCSVFile(this.csvFile).then(() => {
  return this.form.post('api/upload');
}).then(() => {
  this.$Progress.finish();
}).catch(() => {
  this.$Progress.fail();
});

Your post is also tagged with es6, so you could instead make use of the great async / await syntax. In this case, you need to change your function to async, like so:

async formSubmit() {
  this.$Progress.start();
  try {
    await this.processCSVFile(this.csvFile);
    await this.form.post('api/upload');
    this.$Progress.finish();
  } catch (err) {
    this.$Progress.fail();
  }
}