如何知道地图功能何时结束

Question

我有一个"answersRequest；函数，获取它写入"的答案的id；b"；列出

const answersRequest = () => {
let b = [];
answers.map(answer => {
axios({
method: 'POST',
url: 'http://127.0.0.1:8000/api/answers/',
data: answer
}).then(resp => {
b.push(resp.data.id)
})
})
}

在完成地图功能后，需要运行以下功能

const a = () => {setQuestionsBlok([...questionsBlok, {...questionBlokInputs, answers: b}]); setAnswers([])};

但我不知道如何知道地图功能何时结束

请帮帮我

Answer 1

您基本上需要将axios调用的返回值推送到数组，然后使用Promise.allSettled()或Promise.all()等待所有响应，然后才能继续处理该数据。

// Just faking an axios call for this example:
function mockedAxios({ data }) {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
data: {
id: Math.random().toString(36).substr(2, 9),
result: data * 2,
},
});
}, 1000 + Math.random() * 2000)
});
}
async function answersRequest(answers) {  
const promises = answers.map((answer) => {
// Return each promise here:
return mockedAxios({
method: 'POST',
url: 'http://127.0.0.1:8000/api/answers/',
data: answer
});
// No need for a then block here, you can do it below in the `allSettled`'s `then`:
// .then((resp) => {
//   return resp.data.id;
// });
});

// Wait for all responses and process the data:
const IDs = await Promise.allSettled(promises).then((result) => {
// result looks like { status: "fulfilled", value: { data: { id, result } } }
return result.map(r => r.value.data.id);
});
return IDs;
}
async function update() {
// You can now call and await this function from any other async function:
const IDs = await answersRequest([1,2,3,4,5]);

console.log(IDs);

// And then, one you get the result, do whatever you need to do with it:
// const a = () => {
//   setQuestionsBlok([...questionsBlok, {...questionBlokInputs, answers: IDs }]);
//   setAnswers([]);
// };
}
update();

Answer 2

您可以使用Promise.all一次解决所有承诺。

const answersRequest = () => Promise.all(
answers.map(answer => 
axios({
method: 'POST',
url: 'http://127.0.0.1:8000/api/answers/',
data: answer
})
)
);

Promise.all获取传递给它的所有Promises(在本例中，它们是HTTP请求)，并且只有在所有Promise都已解析时才解析。因此，它发送所有的HTTP请求，并等待所有请求完成。之后，返回的Promise的值是一个包含所有响应的数组，这意味着b不再需要单独的变量。

然后您可以使用Promise.then来调用第二个函数。

answersRequest().then(values => {
setQuestionsBlok(
[...questionsBlok,
{
...questionBlokInputs,
answers: values.map(response => response.data.id)
}
]
);
setAnswers([]);
});

这里，values是包含来自请求的所有响应的数组。然后，map调用从响应中提取所有id。

Answer 3

首先，您应该对请求启用异步。

之后，您可以调用循环末尾的函数，如下所示：

const answersRequest = () => {
let i = 0; // Loop counter
let b = [];
// It's called at the end of requests
const funcA = (b) => {
setQuestionsBlok([
...questionsBlok,
{...questionBlokInputs, answers: b}
])
setAnswers([])
}
// Post answers request function
const createAnswers = async (answer) => {
return await axios({
method: 'POST',
url: 'http://127.0.0.1:8000/api/answers/',
data: answer
})
}
answers.map(answer => {
i++; // Increase loop counter value
createAnswers(answer).then(resp => {
b.push(resp.data.id)
// Runs specified function at the end of requests
if(i === answers.length) {
funcA(b)
}
})
})
}

Answer 4

您可以使用async/await来提示函数暂停执行，直到步骤完成：

const answersRequest = async () => {
let b = [];
await answers.map(answer => {
axios({
method: 'POST',
url: 'http://127.0.0.1:8000/api/answers/',
data: answer
}).then(resp => {
b.push(resp.data.id)
})
})
// execution pauses here
setQuestionsBlok([...questionsBlok, {...questionBlokInputs, answers: b}]); setAnswers([])
}

以这种方式，b将被定义为setQuestionsBlok呼叫所需要的。