两个循环异步调用，然后是一个同步调用

Question

我需要编辑以前保存的包含附件的消息。在编辑功能中，用户应该能够编辑邮件标题或文本，替换现有附件或删除附件。

场景：用户对消息文本进行了更改，替换了一个附件并删除了两个附件，然后点击保存。点击保存按钮后，需要进行以下操作

1. 首先替换和删除API调用async
2. 如果替换和删除成功，则调用api将更改保存到文本

这就是我的位置。

replace和delete中Promise.all的.then在循环promise完成之前执行，导致外部promise(在handleSave中(总是得到解析的promise。

CCD_ 6和CCD_

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

Answer 1

对于Promise.all，您当前正在传递一个包含单个项的数组，其中该项是Promises的数组。结果，Promise.all立即解析。

将Promises数组传递给Promise.all，也就是说，只传递.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内部，当出现400错误时，它不会返回内部.textPromise，因此它映射的Promise.all不会在您需要时拒绝。更改：

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(

此外，对于要在catch中处理的saveMessage错误，您也应该返回其每个Promise:

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