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

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() 方法提示“租约”对象是空的。

追踪结果:

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

所以我的问题是:

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

Answer 1

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

}).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 是以这种方式构建的，因为这样您就可以立即对响应状态/ header 采取行动，而无需等待响应主体被完全下载/解析。