Different option to chained promises

Question

Different option to chained promises

In an attempt to develop a function that acquires a presigned s3 URL (call 1) and performs a PUT request to s3, I find myself contemplating the usage of a nested promise structure, which is commonly recognized as an anti-pattern.

Outlined in JavaScript/pseudocode:

uploadFile(file){
  return new Promise((resolve, reject) => {
    axios.get(getPresignedS3Url).then((url) => { return axios.put(file)}
  })
}

let filePromises = files.forEach(file => uploadFile(file));
Promise.all((filePromises) => notifyUpload(filePromises));

The essential need is to return a promise from the uploadFile function to ensure all promises are resolved. What would be the correct approach to address this situation?

javascript es6-promise

Answer 1

Answer №1

When using axios.get, you are already working with a Promise, so there is no need to wrap it in another Promise using new Promise.

Instead of using forEach which returns undefined, consider using .map to create an array of Promises.

const uploadFile = file => axios.get(url)
    .then((url) => { return axios.put(file); });

Promise.all(
  files.map(uploadFile)
)
  .then(notifyUpload)
  .catch(handleErrors);

Answer 2

When using axios.get, you are already working with a Promise, so there is no need to wrap it in another Promise using new Promise.

Instead of using forEach which returns undefined, consider using .map to create an array of Promises.

const uploadFile = file => axios.get(url)
    .then((url) => { return axios.put(file); });

Promise.all(
  files.map(uploadFile)
)
  .then(notifyUpload)
  .catch(handleErrors);

Different option to chained promises

Answer №1

Similar questions

What is the best way to add data to my collection using the main.js file on the server side in a Meteor application

Having difficulty transforming shapefiles into geojson

The function you are trying to use is not a valid jQuery function

Utilizing PHP to Monitor Devices Sharing the Same Network or IP Address

The request cannot be completed using GET. The connection has not been established, and the offline queue is not activated

Error: Client was unable to process JSON data

JavaScript alert causing disruption to Ajax requests

What is the best way to develop a unique animation for every v-card?

JavaScript code that loads a specific DIV element only after the entire webpage has finished loading

Adding an outline to a child mesh in three.js is a simple process

Obtaining the Tinymce Editor Instance using WordPress JavaScript

Create a function that binds a select dropdown to each table column header using JavaScript Object Notation (JSON), and then populate an HTML table with the

Creating a dynamic 3D pie chart with Highcharts and JSON data

iOS - A clever trick for manually setting focus on an input/textarea

The error message encountered while using String.search("sinh(2"): "Regular expression is invalid."

Leverage both props and destructuring in your Typescript + React projects for maximum efficiency!

What exactly is the significance of status within Google Chrome?

Tips for picking out a particular item from a list of child elements

Unit testing tips: the art of mocking a wrapper function

Eliminating the "as" keywords from the TypeScript code