Svelte中Async Axios调用未执行 触发无法将undefined/null转为对象错误

修复后代码 #

<script>
    import axios from 'axios';
    // SvelteKit项目需要引入browser判断，普通Svelte项目可删除下一行和对应判断逻辑
    import { browser } from '$app/environment';

    async function getRestaurants() {
        const response = await axios.get('http://localhost:1337/restaurants');
        // 直接返回接口数据层，避免后续操作Axios响应对象出错
        return response.data;
    }

    // 仅在浏览器环境初始化请求，避免服务端渲染阶段执行请求出错
    let restaurants_promise = browser ? getRestaurants() : Promise.resolve([]);
</script>

<main>
    {#await restaurants_promise}
        <p>wait...</p>
    {:then restaurants}
        <p>The restaurants are:</p>
        <ul>
            {#each restaurants as restaurant}
                <li>{restaurant.name}</li>
            {/each}
        </ul>
    {:catch error}
        <p style="color: red">{error.message || error}</p>
    {/await}
</main>

问题根因说明 #

• 你看到的网络面板无请求、报错TypeError: Cannot convert undefined or null to object，核心原因是如果你的项目是SvelteKit（带服务端渲染/SSR），组件顶层的代码会在服务端先执行一次，服务端环境下请求http://localhost:1337/restaurants要么无法访问，要么Axios在Node.js环境下的配置和浏览器不一致，直接在服务端抛出错误，根本不会走到客户端发起请求的步骤，所以浏览器网络面板看不到记录。
• 加browser判断后，请求只会在浏览器环境初始化，完全符合Svelte await块的使用规范，不需要额外用onMount包裹。
• 如果是普通无SSR的Svelte项目，你可以先打印getRestaurants函数的报错日志，大概率是Axios安装/导入异常，重新安装最新稳定版Axios即可解决。
• 额外优化：直接在请求函数里返回接口的data字段，避免后续模板层访问嵌套属性出错；给li标签加外层ul标签，符合HTML规范。

内容的提问来源于stack exchange，提问作者JarsOfJam-Scheduler