Do I require NESTED promises for this task?

Basil Bear 0
Viewed 64

I want to run hideSaveCancel() and loadPage() after an array of forms has been iterated, during which, each form will be the subject of an async call to insert/update in the database, initiated by the line postObject.preparePost(formData)

        Array.from(document.querySelectorAll('form.dirty')).forEach(
            f => {
                postObject = new Object();
                formData = buildFormDataObject(f);
                eval(`postObject = ${f.dataset['jsobj']}`);
                postObject.preparePost(formData);
            }
        )
    }).then(() => {
        hideSaveCancel();
        loadPage(postSavePage, postSaveArgs);
    });

I don't understand whether I require multiple promises (one for the array and another for the async calls) or one for the whole process, and ...

I need to understand how to send the "completion" message, so that the hideSaveCancel and loadPage are called after all the form updates have completed.

promise javascript
2 Answers

I'd approach it like so...

let requests = [];

[...document.querySelectorAll('form.dirty')].forEach(form => {
    const formData = buildFormDataObject(form);
    const postObject = form.dataset['jsobj'];
    requests.push(postObject.preparePost(formData));
});

Promise.all(requests).then(() => {
    hideSaveCancel();
    loadPage(postSavePage, postSaveArgs);
});

Basically building an array of all your requests and using Promise.all() to resolve once all have completed. This approach allows you to implement better error handling for each response (if you wanted).

Note: I removed your eval statement for the sake of this answer because it's an enormous security risk.

Levi Cole0

Something like this?

Promise.all(
  Array.from(document.querySelectorAll('form.dirty')).map(
    f => {
      postObject = new Object();
      formData = buildFormDataObject(f);
      eval(`postObject = ${f.dataset['jsobj']}`);
      // return the promise
      return postObject.preparePost(formData);
    }
  )
)
.then(() => {
  hideSaveCancel();
  // you can chain it even further if you return the promise
  return loadPage(postSavePage, postSaveArgs);
})

EDIT: Playground link

const querySelectorsReturningForms = [
  document.createElement('form'),
  document.createElement('form'),
  document.createElement('form'),
];


const buildFormData = (f: HTMLFormElement): Record<string, any> => {
  const form = new FormData(f);
  const data: Record<string, any> = {};
  for (const [key, value] of form) {
    data[key] = value;
  }
  return data;
}

const someLongProcessThatSendsRequest = (data: Record<string, any>): Promise<number> => {
  const letsSleepForSomeMs = Math.floor(500 + Math.random() * 1000);
  return new Promise((done, fail) => {
    setTimeout(() => done(letsSleepForSomeMs), letsSleepForSomeMs);
  });
}

Promise.all(
  Array.from(querySelectorsReturningForms).map(
    f => {      
      const data = buildFormData(f);
      // return the promise
      return someLongProcessThatSendsRequest(data)
    }
  )
)
.then((sleepy) => {
  console.log(sleepy);
});
iMike0
Related