代码之家 › 专栏 › 技术社区 › keanu

两个循环异步调用,后跟一个同步调用

fetch promise loops reactjs javascript

keanu · 技术社区 · 4 年前

场景:用户更改了消息文本,替换了一个附件,删除了2个附件,然后点击保存。单击Save按钮后,需要执行以下操作

先异步替换和删除API调用

我就在这里。。

.then Promise.all 在里面 replace delete 在循环承诺完成之前执行,导致外部承诺(在 handleSave )得到一个坚定的承诺。

deleteData 和 replaceData

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
      })
  }

1 回复 | 直到 4 年前

CertainPerformance 4 年前

给你的 Promise.all s、您当前正在传递一个包含单个项的数组,其中该项是一个承诺数组。因此 答应我。好的 立即解决。

向…许下一系列诺言 答应我。好的 相反,这只是 .map ,不是 [data.map(...)] . 更改:

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

到

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

和

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

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

replace ,它不会返回 内部的 .text 答应我。好的 当你想要的时候不会拒绝。更改:

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

到

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

(请注意,您可以使用 .json() 而不是 JSON.parse )

还有,为了你的 saveMessage 要在中处理的错误 catch

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');
      }
    });
};