如何使用 Promise.all() 函数

Question

我正在创建一个大学项目来展示利兹发生的事件。我几乎已经完成了我使用 EventbriteAPI 所做的这个页面。但是，目前我的页面在找出所有活动的地点名称之前不会加载，这需要花费几秒钟的时间。

我认为我需要使用 Promise.all() 函数来实现这一点，但我很难理解如何实现它，因为我对此还很陌生。

eventbrite.js

class EventBrite {
    constructor() {
        this.auth_token = 'Example';
        this.orderby = 'date';
        this.city = 'Leeds';
    }

    //Load Leeds events from API
    async loadAPI() {
        const initalEvents = await fetch(`https://www.eventbriteapi.com/v3/events/search/?sort_by=${this.orderby}&location.address=${this.city}&token=${this.auth_token}`);

        const events = await initalEvents.json();

        return {
            events
        }
    }

    async loadVenue(venueID) {
        const initalVenue = await fetch(`https://www.eventbriteapi.com/v3/venues/${venueID}/?token=${this.auth_token}`);

        const venue = await initalVenue.json();

        return venue;
    }
}

app.js

eventbrite.loadAPI()
    .then(async events => {
        //Check for events
        const eventsList = events.events.events;

        //Print venue IDs
        for(let i = 0, l = eventsList.length; i < l; i++) {
            const venueID = eventsList[i].venue_id;

            let venue = await eventbrite.loadVenue(venueID);
            eventsList[i].venue = venue.name
        }
        ui.displayEvents(eventsList);
    }
)

ui.js

class UI {
    constructor() {
        this.init();
    }
    init() {
        this.printCategories();

        this.result = document.getElementById('result');
    }

    //Display events
    displayEvents(events) {   
        //Build template
        let HTMLTemplate = '';
        events.forEach(eventInfo => {
            HTMLTemplate += `
                <div class="row">
                    <div class="column">
                        <p class="event">${eventInfo.name.text}</p>
                        <p class="event">${eventInfo.venue}</p>
                        <p class="event">${eventInfo.start.local}</p>
                    </div>
                </div>
            `;
        });
        this.result.innerHTML = HTMLTemplate;
    }
}

Answer 1

一个问题是，您连续进行所有这些调用，这意味着完成它们的时间加起来。

最好运行他们并行:

eventbrite.loadAPI()
    .then(async events => {
        let promises = events.events.events.map(async (eventInfo) => {
            let venue = await eventbrite.loadVenue(eventInfo.venue_id);
            eventInfo.venue = venue.name;
            return eventInfo;
        });

        const eventsList = await Promise.all(promises);

        ui.displayEvents(eventsList);
    });

如果响应仍然返回缓慢并且第一个和最后一个之间有很大差异，您可以呈现中间结果：

eventbrite.loadAPI()
    .then(events => {
        const eventsList = events.events.events;

        eventsList.forEach(async (eventInfo) => {
            let venue = await eventbrite.loadVenue(eventInfo.venue_id);
            eventInfo.venue = venue.name;

            ui.displayEvents(eventsList.filter(item => item.venue));
        });
    });

如何使用 Promise.all() 函数

How to use the Promise.all() function

javascript

api

fetch

promise

eventbrite