javascript - 如何在响应数组中访问 promiseValue？

Question

我目前在第一次使用 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() ，这给了我相同的结果(两个 promise )。我在 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)}

非常感谢您的帮助，我希望我缺少一个小细节。我怎样才能获得这些 promise ？谢谢!

Answer 1

你不是在等待 res.json() 的 promise 返回。您可以添加另一个 Promise.all()根据您的 .map() 的结果或者您可以将它们烘焙到您使用的原始 promise 中 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 或其他类型返回的选项，因此您不必再进行另一个 promise 返回函数调用来执行此操作。

仅供引用， request-promise nodejs 的模块，具有这两个选项(因为它们经常需要)。

但是，由于它没有这些选项(尽管它们经常需要)，我们有时必须将其包装以添加这些选项以避免重复代码。在这种情况下，如果不是 2xx 状态，您希望它拒绝，并且您希望它读取和解析 JSON，并且您希望在两个地方执行此操作，因此我们制作了一个小型实用程序函数来执行此操作。