如何在响应数组中访问 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() ，这给了我相同的结果（两个承诺）。我在 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)}非常感谢您的帮助，我希望我缺少一个小细节。我怎样才能获得这些承诺？谢谢！

Answer 1

你不是在等待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()界面应该提供两件事。

1. 一个选项，让您告诉它如果不是 2xx 状态，您希望它拒绝。我理解在这种情况下并不总是拒绝的用例，但可能有更多用例您希望它拒绝，所以它应该是一个选项。

2. 告诉它读取响应并以文本、json 或其他类型返回的选项，因此您不必再进行另一个承诺返回函数调用来执行此操作。

仅供参考，request-promisenodejs 的模块，具有这两个选项（因为它们经常需要）。

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

Answer 2

在回调中返回一个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);

    }

}