面试题：SvelteKit路由基础之高级难度：动态路由参数处理

Question

在SvelteKit构建的Svelte应用里，假设你有一个显示用户详细信息的页面，用户ID作为动态路由参数。请说明如何获取该动态参数，并使用它从API中获取相应的用户数据，同时阐述如何处理可能出现的参数缺失或无效情况。

Answer 1

1. 获取动态路由参数：
   • 在SvelteKit中，你可以通过$page.params获取动态路由参数。假设路由定义为/user/[id]，在组件脚本部分可以这样获取参数：

   import { page } from '$app/stores';
   import { derived } from 'svelte/store';
   
   const userID = derived(page, ($page) => $page.params.id);
   

2. 从API获取相应用户数据：
   • 利用fetch函数结合获取到的userID从API获取数据。例如：

   let userData;
   userID.subscribe((id) => {
       if (id) {
           fetch(`/api/users/${id}`)
              .then((response) => response.json())
              .then((data) => {
                   userData = data;
               });
       }
   });
   

3. 处理参数缺失或无效情况：
   • 参数缺失：
     • 当$page.params.id不存在时，derived中的id值为undefined。可以在获取数据逻辑中进行处理，比如显示一个提示信息。

     {#if!$userID}
         <p>用户ID缺失，请检查链接。</p>
     {:else}
         <!-- 正常显示用户数据逻辑 -->
     {/if}
     

   • 参数无效：
     • 若API返回404或其他错误状态码表示参数无效（例如id格式不正确，API无法识别），可以在fetch的then处理中检查状态码。

     userID.subscribe((id) => {
         if (id) {
             fetch(`/api/users/${id}`)
                .then((response) => {
                     if (!response.ok) {
                         throw new Error('无效的用户ID');
                     }
                     return response.json();
                 })
                .then((data) => {
                     userData = data;
                 })
                .catch((error) => {
                     console.error(error);
                     // 显示错误提示
                     userData = null;
                     const errorMessage = '获取用户数据失败：无效的用户ID';
                 });
         }
     });
     

   • 在页面中可以这样显示错误信息：

   {#if errorMessage}
       <p>{errorMessage}</p>
   {:else if userData}
       <!-- 显示用户数据 -->
   {/if}