然后/捕获如何处理一组Promises

Question

I don't know to to resolve this situation using JS promises.

Imagine I have some articles and I want to send a patch request to update them. I send one request per article. If the request of one article success then I update that article, but if the request fails, then I update the article differently. Also I want to show a message to the user informing if all the articles have been updated correctly or not.

This is not my real scenario and this may be a weird example. But it's what I want to accomplish in my React app.

Here is what I'm trying to do right now:

const saveArticles = articles => {
  const promises = [];

  articles.forEach(article => {
    const promise = axios
      .patch('/articles', article)
      .then(() => updateArticleUi(article))
      .catch(() => updateArticleUiWithError(article));

    promises.push(promise);
  });

  Promise.all(promises)
    .then(() => tellTheUserThereWasNoErrors())
    .catch(() => tellTheUserThereWasSomeErrors());
};

This isn't working because the Promise.all is always executing the then callback, weather all promises succeed or not.

Thanks!

Answer 1

Your updateArticleUi and updateArticleUiWithErrors should have the respective return values so that you can distinguish whether there was an error or not when looking at the array of results:

function updateArticleUi(article) {
  …
  return {success: true};
}
function updateArticleUiWithError(article, error) {
  …
  return {success: false};
}

function saveArticles(articles) {
  const promises = articles.map(article => {
    return axios.patch('/articles', article).then(() =>
      updateArticleUi(article)
    , err =>
      updateArticleUiWithError(article, err)
    );
  });

  return Promise.all(promises).then(results => 
    if (results.every(res => res.success)) {
      tellTheUserThereWasNoErrors();
    } else {
      tellTheUserThereWasSomeErrors();
    }
  });
}

Answer 2

This works:

 function axiosPatchRequest(url,data) { return new Promise(function (resolve, reject) { if (data) { resolve(url); } else { reject('DATA_NOT_FOUND'); } }) } function updateArticleUi(data,article) { return new Promise(function (resolve, reject) { resolve({type:"updateArticleUi ",data,article}); }) } function updateArticleUiWithError(data,article) { return new Promise(function (resolve, reject) { reject({type:"updateArticleUiWithError ",data,article}); }) } function tellTheUserThereWasNoErrors(data){ console.log("tellTheUserThereWasNoErrors",data); } function tellTheUserThereWasSomeErrors(error){ console.log("tellTheUserThereWasSomeErrors",error); } const execute = (articles)=>{ const promises = []; articles.forEach(article => { const promise = axiosPatchRequest('/articles', article) .then((data) => { return updateArticleUi(data,article); }) .catch((error) => { return updateArticleUiWithError(error,article); }); promises.push(promise); }); Promise.all(promises) .then((data) => tellTheUserThereWasNoErrors(data)) .catch((error) => tellTheUserThereWasSomeErrors(error)); }; execute(["one","","three"]); execute(["one","two","three"]); 

Answer 3

Promise.all will always call then because the promise you add to promises is already resolved one with either then or catch attached above

if you want to see catch to happen in .all chain just throw some exeption in updateArticleUiWithErro function

Answer 4

The problem is that you are catching the error thrown by

const promise = axios
      .patch('/articles', article)
      .then(() => updateArticleUi(article))
      .catch(() => updateArticleUiWithError(article));

you should either throw a new error in the axios catch() or let the error bubble up by removing the catch from the axios call.