Is it possible for the second .then to execute before the first one in a Promise chain? Mind-blowing!

Question

Is it possible for the second .then to execute before the first one in a Promise chain? Mind-blowing!

I am currently working on creating a new File object from blob data within a .then structure. However, I have encountered an issue where the second .then function runs before the first one finishes, resulting in the file object not being fully filled yet.

Is this normal behavior? Should I consider making the first .then function an async function to ensure that the second one is only called after the file object has been properly populated?


let output = {file: {}, file_infos: {}},
    image = FileAPI.Image(src_file);
await Promise.all(Object.keys(parameters).map(async (parameter_name) => {
  try {
    image = await FileMethods[parameter_name](image, parameters[parameter_name]);
    return image;
  }
  catch(err) {
    console.log(err);
  };
}))
.then((output_image) => {
  output_image[0].toBlob((blob) => {
    output.file = new File([blob], src_file.name); // This needs to be completed before moving to step 2
    console.log('step1');
  });
})
.then(() => {
  console.log('step2');
  FileAPI.getInfo(output.file, (err/**String*/, infos/**Object*/) => {
    if( !err ){
      output.file_infos = infos;
    } else {
      console.log("This error occurred because output.file was not fully filled yet");
    }
  })
});
// console.log(output);
return output;

The console output displays:

step2
This error occurred because output.file was not fully filled yet
step1

Thank you for your assistance :)

javascript file asynchronous promise async-await

Answer 1

Answer №1

Ensure that the two asynchronous functions within the .then blocks are "Promisified" since they do not return a Promise. Also, considering the use of async/await, it is advisable to avoid chaining promises with .then.

const image = FileAPI.Image(src_file);
const output_image = await Promise.all(Object.keys(parameters).map(async(parameter_name) => {
    try {
        image = await FileMethods[parameter_name](image, parameters[parameter_name]);
        return image;
    } catch (err) {
        console.log(err);
    };
}));
const file = await new Promise((resolve, reject) => output_image[0].toBlob((blob) => 
    resolve(new File([blob], src_file.name))
));
const file_infos = await new Promise((resolve, reject) => FileAPI.getInfo(file, (err, file_infos) => {
    if (!err) {
        resolve(file_infos);
    } else {
        reject("this is triggered because output.file isn't filled yet");
    }
));
return {file, file_infos};

Regarding the section:

const output_image = await Promise.all(Object.keys(parameters).map(async(parameter_name) => {
    try {
        image = await FileMethods[parameter_name](image, parameters[parameter_name]);
        return image;
    } catch (err) {
        console.log(err);
    };
}));

You could simplify it by returning directly the promise in the .map without using async/await like this:

const output_image = await Promise.all(Object.keys(parameters).map((parameter_name) => 
    FileMethods[parameter_name](image, parameters[parameter_name]);
));

Another approach could be:

const output_image = await Promise.all(Object.entries(parameters).map((p_name, p_value) =>
    FileMethods[p_name](image, p_value)
));

If you prefer using Promise .then chains and avoiding async/await:

const image = FileAPI.Image(src_file);
return Promise.all(Object.keys(parameters).map(parameter_name => FileMethods[parameter_name](image, parameters[parameter_name])))
.then(output_image => new Promise((resolve, reject) => output_image[0].toBlob((blob) => 
    resolve(new File([blob], src_file.name))
)))
.then(file => new Promise((resolve, reject) => FileAPI.getInfo(file, (err, file_infos) => {
    if (!err) {
        resolve({file, file_infos});
    } else {
        reject("this is triggered because output.file isn't filled yet");
    }
)));

Answer 2

Ensure that the two asynchronous functions within the .then blocks are "Promisified" since they do not return a Promise. Also, considering the use of async/await, it is advisable to avoid chaining promises with .then.

const image = FileAPI.Image(src_file);
const output_image = await Promise.all(Object.keys(parameters).map(async(parameter_name) => {
    try {
        image = await FileMethods[parameter_name](image, parameters[parameter_name]);
        return image;
    } catch (err) {
        console.log(err);
    };
}));
const file = await new Promise((resolve, reject) => output_image[0].toBlob((blob) => 
    resolve(new File([blob], src_file.name))
));
const file_infos = await new Promise((resolve, reject) => FileAPI.getInfo(file, (err, file_infos) => {
    if (!err) {
        resolve(file_infos);
    } else {
        reject("this is triggered because output.file isn't filled yet");
    }
));
return {file, file_infos};

Regarding the section:

const output_image = await Promise.all(Object.keys(parameters).map(async(parameter_name) => {
    try {
        image = await FileMethods[parameter_name](image, parameters[parameter_name]);
        return image;
    } catch (err) {
        console.log(err);
    };
}));

You could simplify it by returning directly the promise in the .map without using async/await like this:

const output_image = await Promise.all(Object.keys(parameters).map((parameter_name) => 
    FileMethods[parameter_name](image, parameters[parameter_name]);
));

Another approach could be:

const output_image = await Promise.all(Object.entries(parameters).map((p_name, p_value) =>
    FileMethods[p_name](image, p_value)
));

If you prefer using Promise .then chains and avoiding async/await:

const image = FileAPI.Image(src_file);
return Promise.all(Object.keys(parameters).map(parameter_name => FileMethods[parameter_name](image, parameters[parameter_name])))
.then(output_image => new Promise((resolve, reject) => output_image[0].toBlob((blob) => 
    resolve(new File([blob], src_file.name))
)))
.then(file => new Promise((resolve, reject) => FileAPI.getInfo(file, (err, file_infos) => {
    if (!err) {
        resolve({file, file_infos});
    } else {
        reject("this is triggered because output.file isn't filled yet");
    }
)));

Answer 3

Answer №2

.toBlob() executes quickly due to its use of the asynchronous callback approach.

If you require a promise that resolves upon completion of the task, consider this implementation:

.then((output_image) => {
    return new Promise((resolve, reject) => {
      output_image[0].toBlob((blob) => {
        output.file = new File([blob], src_file.name); // This must be completed before proceeding to step 2
        console.log('step1');
        resolve();
      });
    });
  })

Answer 4

.toBlob() executes quickly due to its use of the asynchronous callback approach.

If you require a promise that resolves upon completion of the task, consider this implementation:

.then((output_image) => {
    return new Promise((resolve, reject) => {
      output_image[0].toBlob((blob) => {
        output.file = new File([blob], src_file.name); // This must be completed before proceeding to step 2
        console.log('step1');
        resolve();
      });
    });
  })

Answer 5

Answer №3

toBlob is likely running asynchronously. Adjust the initial .then to the following:

.then((output_image) => {
  return new Promise((resolve) => output_image[0].toBlob((blob) => {
    output.file = new File([blob], src_file.name); // This must be completed before proceeding to step2
    console.log('step1');
    resolve();
  }));
})

Answer 6

toBlob is likely running asynchronously. Adjust the initial .then to the following:

.then((output_image) => {
  return new Promise((resolve) => output_image[0].toBlob((blob) => {
    output.file = new File([blob], src_file.name); // This must be completed before proceeding to step2
    console.log('step1');
    resolve();
  }));
})

Is it possible for the second .then to execute before the first one in a Promise chain? Mind-blowing!

Answer №1

Answer №2

Answer №3

Similar questions

Create a new division directly underneath the bootstrap column

During the click event, two distinct $.ajax requests interfere and cancel each other out

Having issues with array.push functionality in JavaScript

Efficient Routing with React Router 4: Embracing Code Splitting and Component Remount

establish the reliance on field w

Creating a many-to-many relationship in Sequelize using a join table to insert data

Merging values of different keys in a .json file

React Native: A guide to triggering a modal or action sheet when a button tab is clicked using Wix React Native navigation

Ensure redirect is delayed until async data is fetched

Display all active services in a new list item using AngularJS Ionic's ng-repeat directive

One benefit of using a self-invoking function within a function declaration

Ways to conceal the contents of an HTML element

What could be causing my for loop to not function properly within the ngOnInit lifecycle hook?

Modify one of the items in the array without changing its original state

A guide to troubleshoot and resolve the 500 (Internal Server Error) encountered during an Ajax post request in Laravel

Exploring Vuetify's TreeView for Dynamic Data Management

Rendering React Js component occurs just once following a state update

preventing sliding in a specific angle within the angularjs ionic framework

Export default does not actually yield a function; rather, it returns an object

Issues with the LIKE operator