0

I have the following 2 functions:

$(document).on(`dragover drop change`, `.fileUpload`, async function(e) {
    e.stopPropagation();
    e.preventDefault();
    const thisEl = $(this);
    if (thisEl.val() === `` || e.type === `dragover`) {
        return;
    }
    const headerRec = await getCSVHeaderRow(thisEl[ 0 ].files[ 0 ], `,`);
    console.log(`header rec: `, headerRec,headerRec2);
});

function getCSVHeaderRow(file, delim) {
    return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.onload = function(e) {
            let headerRow = [];
            const rows = e.target.result.split(`\r\n`);
            headerRow = rows[ 0 ];
            console.log(`headerrow: `, headerRow, headerRow.split(delim));
            resolve(headerRow.split(delim));
        };

        reader.onerror = reject;
        reader.readAsText(file);
    });
}

I am trying to use $.when() rather than await but the called function returns a promise object rather than the array:

$(document).on(`dragover drop change`, `.fileUpload`, function(e) {
    e.stopPropagation();
    e.preventDefault();
    const thisEl = $(this);
    if (thisEl.val() === `` || e.type === `dragover`) {
        return;
    }
    const headerRec2 = $.when(getCSVHeaderRow2(thisEl[ 0 ].files[ 0 ], `,`)).then(function(data) {
        return data;
    });
    console.log(`header rec: `, headerRec,headerRec2);
});

function getCSVHeaderRow2(file, delim) {
    const dfr = $.Deferred();
    let reader = new FileReader();
    reader.onload=function(e) {
        let headerRow = [];
        const rows = e.target.result.split(`\r\n`);
        headerRow = rows[ 0 ];
        console.log(`headerrow: `, headerRow, headerRow.split(delim));
        return headerRow.split(delim);
    };
    return dfr.resolve(reader.readAsText(file));

}

What do I need to change in getCSVHeaderRow2() to have it return the array in the way getCSVHeaderRow() is?

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Chris
  • 650
  • 7
  • 20
  • 1
    "*I am trying to use $.when() rather than await*" - why? `$.when` is a horrible API. Use modern promises, and use them with `async`/`await` for ease. – Bergi Jan 19 '22 at 20:26
  • The correct usage of the `then` method is `getCSVHeaderRow(thisEl[ 0 ].files[ 0 ], ',').then(headerRec => { console.log('header rec: ', headerRec, headerRec2); })`. Notice that `then` cannot return the array from the future. – Bergi Jan 19 '22 at 20:28
  • Bergi -- I'm really tending to agree with you on this. $.when seems most appropriate for jquery ajax calls and that's about it. – Chris Jan 19 '22 at 20:35
  • You [don't even need](https://stackoverflow.com/a/31327725/1048572), and imo shouldn't use, `$.when` for ajax calls. – Bergi Jan 19 '22 at 20:40
  • `$.when()` is not an alternative for keyword `await`; neither will it promisify `reader.readAsText();`. The expression `.then(function(data) { return data; })` does not unwrap `data`; it returns Promise. The expression `dfr.resolve(reader.readAsText(file));` does not unwrap `data`; it returns Promise. The alternatives available in this context are `await` versus `.then()`, which are syntactic variants for handling the value delivered by a Promise. – Roamer-1888 Jan 21 '22 at 21:50

0 Answers0