如何获取对象列表并等待它们完成？

Question

我有一个要遵循的 URL 列表，并且想将结果存储在一个数组中。当前的实现是使用 map 来获取并使用 when.all 来等待。如下所示：

        const when = require('when');

        }).then((responseJson) => {
            return responseJson._embedded.leases.map(
                lease => fetch(lease._links.self.href, {headers: {'Access-Control-Expose-Headers': 'ETag'}}));
        }).then(leasePromises => {
            return when.all(leasePromises);
        }).then((leases) => {
            var obj = leases.toString();
            console.log("leasesJSON = " + obj);
            console.log("leases[0]0= " + leases[0]);
            console.log("leases[0]1= " + JSON.stringify(leases[0]));
            console.log("leases[0]2= " + leases[0].json());
            console.log("leases[0]3= " + JSON.stringify(leases[0].json()));
            this.setState({
                isLoading: false,
                leases: leases,
                attributes: Object.keys(this.schema.properties)
            });
        }).catch((error) => {
            console.error("loadDataFromServer error = " + error);
        });

但是 render() 方法抱怨 'leases' 对象是空的。

追踪结果：

leasesJSON = [object Response],[object Response]
leases[0]0= [object Response]
leases[0]1= {}
leases[0]2= [object Promise]
leases[0]3= {}

所以我的问题是：

如何打印promise和response信息？
我获取对象列表的方式是否正确？
如果不是那么如何纠正它们？

Answer 1

获取 API 的响应具有 .json() 方法（如您所知），它是异步的；它 returns 一个承诺。
因此，您必须等待它才能从服务器返回实际对象；这可能是导致您出现问题的原因。

}).then((responseJson) => {
    return responseJson._embedded.leases.map(
        lease => fetch(lease._links.self.href, {headers: {'Access-Control-Expose-Headers': 'ETag'}}));
}).then(leasePromises => {
    return when.all(leasePromises);
}).then(leasesResponses => {
    return when.all(leasesResponses.map(response => response.json()));
}).then(leases => {
  // leases is finally what you expected them to be!
})

API 是以这种方式构建的，因为这样您就可以立即对响应 status/headers 采取行动，而无需等待响应正文完全 downloaded/parsed.

如何获取对象列表并等待它们完成？

How to fetch a list of objects and wait for them to finish?

javascript

reactjs

fetch-api

when-js