JavaScript：从递归函数返回数组

Question

我已经创建了一个从 api 构建一些数据的类：

const http = require("http");

class VideoService {

    constructor() {
        this.items = [];
    }

    fetchVideos(token = "") {

        const url = `https://www.example.com`;

        http.getJSON(url).then((results) => {
            results.items.forEach((item, index) => {
                const vid = item.snippet.resourceId.videoId;

                this.items.push({
                    title: item.title,
                    date: item.publishedAt
                });

                console.log(this.items.length); // here length inreases, works here
            });

            if (typeof results.nextPageToken !== "undefined") {
                return this.fetchVideos(results.nextPageToken);
            }

        });
    }

    getVideos() {
        this.fetchVideos();

        console.log(this.items.length); // this returns 0 instead of all items fetched

        return this.items;
    }

}

module.exports = VideoService;

在另一个文件中，我是这样使用的：

const videoService = require("../shared/videoService");

const videos = (new videoService()).getVideos();
console.log(videos);

最后一次console.log 调用总是返回空数组，而不是在上述类的items 属性中收集的所有数据。

谁能告诉我这里缺少什么？

Answer 1

发生这种情况是因为在您的函数fetchVideos() 中，您正在进行一个将异步处理的http 调用。你可以尝试这样处理。

fetchVideos(token = "") {

    const url = `https://www.example.com`;

    return http.getJSON(url).then((results) => {
        results.items.forEach((item, index) => {
            const vid = item.snippet.resourceId.videoId;

            this.items.push({
                title: item.title,
                date: item.publishedAt
            });

            console.log(this.items.length); // here length inreases, works here
        });

        if (typeof results.nextPageToken !== "undefined") {
            return this.fetchVideos(results.nextPageToken);
        }
        else return new Promise((resolve, reject)=>{
          resolve();
        });

    });
}

getVideos() {
    return this.fetchVideos().then(function(){
       console.log(this.items.length); // this returns 0 instead of all items fetched
    return this.items;
    });
}

我建议阅读有关 javascript 中的承诺和异步性的内容。检查此链接： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise