如何在响应数组中访问 promiseValue？
我目前在第一次使用 Promise.all() 时遇到问题（两种获取方法）。目前，当我在控制台记录我的响应时，我可以在响应中的 promiseValue 下看到我试图获取的数据。但我不确定如何访问它？
这是我的代码：
getData: function () {
Promise.all([
fetch('@Url.Action("GetSomething")',
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(this.selectedValues)
}),
fetch('@Url.Action("GetSomethingElse")',
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(this.selectedValues)
})
]).then(responses => {
if (responses[0].ok && responses[1].ok) {
return responses.map(response => {
return response.json();
});
} else {
throw new Error(`Error ${response.status}`);
}
}).then(responseArray => {
console.log("LOG: ", responseArray);
}).catch(error => {
console.log(error);
});
},
在线阅读答案后，有一些建议可以添加另一个 .then() ，这给了我相同的结果（两个承诺）。我在 StackOverflow 上查看了有关此问题的相关问题，但只是变得更加困惑。我也尝试过执行以下操作，也给出了相同的结果：
...
}).then(responseArray => {
console.log("LOG: ", responseArray);
Promise.resolve([responseArray[0], responseArray[1]]).then((results) => {
console.log("Resolved results: ", results);
});
}).catch(error => {
console.log(error);
});
我现在卡住了！这是 console.log 在响应中显示的内容：
LOG: (2) [Promise, Promise]
>0: Promise: {<Resolved>: (Array(20)}
>1: Promise: {<Resolved>: (Array(10)}
非常感谢您的帮助，我希望我缺少一个小细节。我怎样才能获得这些承诺？谢谢！
猛跑小猪2回答
-
Helenr
你不是在等待res.json()返回的承诺。Promise.all()您可以在您的结果上添加另一个，.map()或者您可以将它们烘焙到您使用的原始承诺中Promise.all()。后者是我的建议：function fetchJSON(...args) { return fetch(...args).then(response => { if (!response.ok) { throw new Error(`Error ${response.status}`); } return response.json(); });}getData: function() { Promise.all([ fetchJSON('@Url.Action("GetSomething")', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(this.selectedValues) }), fetchJSON('@Url.Action("GetSomethingElse")', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(this.selectedValues) }) ]).then(responseArray => { console.log("LOG: ", responseArray); // use responseArray here }).catch(error => { console.log(error); });},仅供参考，我经常发现使用检索响应fetch()是不必要的冗长，因此最终使用某种辅助函数，如fetchJSON()我在这里使用的，以防止重复代码。在我看来，fetch()界面应该提供两件事。一个选项，让您告诉它如果不是 2xx 状态，您希望它拒绝。我理解在这种情况下并不总是拒绝的用例，但可能有更多用例您希望它拒绝，所以它应该是一个选项。告诉它读取响应并以文本、json 或其他类型返回的选项，因此您不必再进行另一个承诺返回函数调用来执行此操作。仅供参考，request-promisenodejs 的模块，具有这两个选项（因为它们经常需要）。但是，由于它没有这些选项（尽管它们经常需要），我们有时必须将其包装以添加这些选项以避免重复代码。在这种情况下，如果不是 2xx 状态，您希望它拒绝，并且您希望它读取和解析 JSON，并且您希望在两个地方执行此操作，因此我们制作了一个小型实用程序函数来执行此操作。 -
海绵宝宝撒
在回调中返回一个Promise 会导致在链then中的 next 中解决 Promise 。then然而，这里返回了一个 promise 数组，promise 没有在 next 中解决then：return responses.map(response => { return response.json(); });应该有另一个Promise.all并行解决它们：return Promise.all(responses.map(response => { return response.json(); }));或者可以将其重写为使用for循环的顺序处理，因为在发出请求后预计并行性不会有明显的改进。无论如何，async..await使这更简单：async getData() { try { const responses = await Promise.all([ fetch(...), fetch(...) ]); const responseArray = []; for (const response of responses) { if (!response.ok) throw new Error(`Error ${response.status}`); responseArray.push(await response.json()); } ... } catch (error){ console.log(error); }}
随时随地看视频慕课网APP
相关分类
JavaScript