Two looped async calls followed by a sync call

Question

I need to edit previously saved messages that contain attachments. In the edit functionality, the user should be able to edit message title or text, replace existing attachments or delete attachments.

Scenario: User made changes to message text, replaced one attachment and deleted 2 attachments and hit Save. OnClick of Save button, the following actions need to happen

Replace and Delete API calls async first
If replace and delete is successful then api call to save changes to text

This is where I'm at..

.then of Promise.all in replace and delete is executed before the loop promise finishes, resulting in the outer promise (in handleSave) getting a resolved promise always.

deleteData and replaceData are arrays containing the data to be replaced/deleted

const delete = () => {
    if (deleteData.length > 0) {
      return Promise.all([
        deleteData.map(data => fetch(url)
          .then((response) => {
            if (!response.ok) {
              throw new Error('Delete Failed');
            }
          })
        ),
      ]).then(() => Promise.resolve('Deleted'));
    }
    return Promise.resolve('Nothing to delete');
  };

const replace = () => {
    if (replaceData.length > 0) {
      return Promise.all([
        replaceData.map(data => fetch(url)
          .then((response) => {
            if (response.status === 400) {
              response.text().then((error) => {
                const errorObject = JSON.parse(error);
                throw new Error(error);
              });
            } else if (!response.ok) {
              throw new Error('Update Failed');
            }
          })
        ),
      ]).then(() => Promise.resolve('Replaced'));
    }
    return Promise.resolve('Nothing to replace');
  };

const saveMessage = () => {
    fetch(saveUrl)
        .then((response) => {
            if (response.status === 400) {
              response.text().then((error) => {
                const errorObject = JSON.parse(error);
                throw new Error(error);
              });
            } else if (!response.ok) {
              throw new Error('Save Failed');
            }
        });
}

const handleSave = () => {
  Promise.all([replace, delete])
     .then(() => {
       saveMessage();
      }).catch((e) => {
        //Catch action
      })
  }

Your `save` doesn't return anything, you probably want to `return` the fetch call so it can be caught below in handleSave — CertainPerformance, Sep 20 '20 at 16:08

CertainPerformance · Accepted Answer · 2020-09-20T18:12:33.387

3

To your Promise.alls, you're currently passing an array containing a single item, where that item is an array of Promises. As a result, the Promise.all resolves immediately.

Pass an array of Promises to Promise.all instead - that is, just the .map, not [data.map(...)]. Change:

return Promise.all([
  deleteData.map(data => fetch(url)

to

return Promise.all(
  deleteData.map(data => fetch(url)

and

return Promise.all([
  replaceData.map(data => fetch(url)

to

return Promise.all(
  replaceData.map(data => fetch(url)

Also, inside replace, it isn't returning the inner .text Promise when there's a 400 error, so its mapped Promise.all won't reject when you want it to. Change:

if (response.status === 400) {
  response.text().then((error) => {
    const errorObject = JSON.parse(error);
    throw new Error(error);
  });

to

if (response.status === 400) {
  return response.json().then((error) => {
    throw new Error(error);
  });

(note that you can use .json() instead of JSON.parse)

Also, for your saveMessage errors to be handled in the catch, you should return each of its Promises too:

const saveMessage = () => {
  return fetch(saveUrl)
    .then((response) => {
      if (response.status === 400) {
        return response.json().then((error) => {
          throw new Error(error);
        });
      } else if (!response.ok) {
        throw new Error('Save Failed');
      }
    });
};

edited Sep 20 '20 at 18:12

answered Sep 20 '20 at 16:12

CertainPerformance

356,069
52
309
320

Thanks but that isnt the problem.. The problem is that the loops in replace and delete are not working as expected. I prefer to keep .text() because if response is empty .json() fails – keanu Sep 20 '20 at 16:18
It's definitely at least one part of the problem. Can you show where you define `deleteData`, `replaceData`, `replace`, `delete`? – CertainPerformance Sep 20 '20 at 16:19
deleteData and replaceData are arrays containing the data to be replaced/deleted – keanu Sep 20 '20 at 16:28
I see the issue, you're passing an array of arrays to `Promise.all` instead of an array of Promises. – CertainPerformance Sep 20 '20 at 16:33
Are you sure you added the `return`? That is, `return response.text()` or `.json()` instead of just `response.text()` or `.json()`? – CertainPerformance Sep 20 '20 at 18:13
That was it mate! Thanks! – keanu Sep 20 '20 at 18:24

Two looped async calls followed by a sync call

1 Answers1