Svelte Kit load函数异步加载附加数据的时序问题解决

问题根源 #

你代码里的forEach不会等待内部的异步请求完成，当load函数返回数据时，部分获取剧集title的请求还在后台运行，导致页面渲染时这些episode.title还没被赋值，出现undefined的情况。而后续console.log能看到title，是因为那些异步请求后来完成了。

修复代码 #

把forEach替换成map生成Promise数组，再用Promise.all等待所有异步操作完成后再返回数据：

import { PUBLIC_API_URL } from '$env/static/public';

/** @type {import('./$types').PageServerLoad} */
export async function load() {
    let response = await fetch(PUBLIC_API_URL.concat("/episode/recently-added"));
    let recently_added_episodes = await response.json();
    
    // 等待所有剧集title请求完成
    await Promise.all(recently_added_episodes.map(async (episode) => {
        let titleResponse = await fetch(`${PUBLIC_API_URL}/episode/${episode.episode_id}/title`);
        episode.title = await titleResponse.text();        
    }));

    response = await fetch(PUBLIC_API_URL.concat("/episode/upcoming"));
    let upcoming_episodes = await response.json();

    return { recently_added_episodes, upcoming_episodes };
}

关键修改说明 #

• map会将每个异步请求包装成Promise并返回数组，替代forEach无返回值的特性
• Promise.all会等待数组中所有Promise执行完成，确保所有episode.title都被正确赋值后，才继续执行后续代码和返回数据
• 用模板字符串替换concat拼接URL，代码更简洁易维护

内容的提问来源于stack exchange，提问作者Iak essub