Javascript 类在 console.log 中返回不同的值

Question

我有以下类(class)(此处删除了不必要的细节以使其更具可读性):

class CollectionManager {
constructor(){
    this.collectionList = {};
}
initialize(collections){
    ...
}
populate(){
    var collectionObjs = Object.keys(this.collectionList).map(function(key){
        return collectionManager.collectionList[key];
    });
    return Promise.all(collectionObjs.map(function(collection){
        collection.populateVideos();
    }));
}
}

.

class Collection {
constructor(data){
    this.collectionInfo = data;
    this.videoArray = [];
}
populateVideos(){
    var collectionKey = this.collectionInfo.COLLECTIONID;
    var vChannels = Object.keys(this.collectionInfo.channels);
    return Promise.all(vChannels.map(requestVideos))
        .then(function (results) {
            var videoIdArray = [];
            return videoIdArray = [].concat.apply([], results);
        }).then(function(arrVideoIds){
            var groups = [];
            for (var i = 0; i < arrVideoIds.length; i += 50) {
                groups.push(arrVideoIds.slice(i, i + 50));
            }
            return groups;
        }).then(function(chunkedArrVideoIds){
            return Promise.all(chunkedArrVideoIds.map(requestVideoData)).then(function (results) {
                var videoTileArray = [].concat.apply([], results);
                collectionManager.collectionList[collectionKey].videoArray = videoTileArray;
                return videoTileArray;
            });
        });
}
displayCollection(){
    console.log(this.collectionInfo.COLLECTIONID);
    console.log(collectionManager.collectionList);
    console.log(collectionManager.collectionList[1]);
    console.log(collectionManager.collectionList[1].videoArray);

我将这些类称为任何正常的 promise 。

collectionManager.populate().then(
    function(){
        collectionManager.displayCollections()
    }
); 

现在我的问题是，当我调用此代码并读取控制台上的内容时，第四个控制台日志中的 videoArray 完全为空。 collectionManager.collectionList[1] 包含一个完整的对象，其中有一个长度为 100 的 videoArray，其中包含我的所有视频。但是，如果我调用 collectionManager.collectionList[1].videoArray 它是空的，就像没有被填充一样。据我所知，这些应该调用同一个确切的位置，但它给出了不同的结果。

有人看出我哪里搞砸了吗？

Answer 1

在 populate 函数中，您的 Promise.all ... 映射返回一个未定义的数组，该数组将立即由 Promise.all 解析

您应该执行以下操作

populate(){
    var collectionObjs = Object.keys(this.collectionList).map(function(key){
        return collectionManager.collectionList[key];
    });
    return Promise.all(collectionObjs.map(function(collection){
        return collection.populateVideos();
    }));
}

但是，当您使用 Class 时 - 您已经在使用更现代的 javascript

所以

populate(){
    var collectionObjs = Object.keys(this.collectionList).map(key => collectionManager.collectionList[key]);
    return Promise.all(collectionObjs.map(collection => collection.populateVideos()));
}

完全可以接受

顺便说一句，你的类 Collection 也可以使用箭头函数和更好的 promise 链来变得更干净(在我看来)

class Collection {
    constructor(data) {
        this.collectionInfo = data;
        this.videoArray = [];
    }
    populateVideos() {
        var collectionKey = this.collectionInfo.COLLECTIONID;
        var vChannels = Object.keys(this.collectionInfo.channels);
        return Promise.all(vChannels.map(requestVideos))
        .then(results => [].concat.apply([], results))
        .then(arrVideoIds => {
            var groups = [];
            for (var i = 0; i < arrVideoIds.length; i += 50) {
                groups.push(arrVideoIds.slice(i, i + 50));
            }
            return groups;
        )
        .then(chunkedArrVideoIds => Promise.all(chunkedArrVideoIds.map(requestVideoData)))
        .then(function(results) {
            var videoTileArray = [].concat.apply([], results);
            collectionManager.collectionList[collectionKey].videoArray = videoTileArray;
            return videoTileArray;
        });
    }
    displayCollection() {
        console.log(this.collectionInfo.COLLECTIONID);
        console.log(collectionManager.collectionList);
        console.log(collectionManager.collectionList[1]);
        console.log(collectionManager.collectionList[1].videoArray);
    }
}