面试题：Svelte中如何处理异步状态管理

Question

在Svelte项目中，假设你需要从API获取用户数据并展示在页面上，在获取数据过程中，可能会出现加载中、成功获取数据、获取数据失败等状态，简述如何使用Svelte来处理这种异步状态管理，包括如何创建状态变量，以及在不同状态下如何更新视图。

Answer 1

1. 创建状态变量：

   • 在Svelte组件中，使用let关键字来声明状态变量。例如：

   <script>
       let userData;
       let isLoading = false;
       let error;
       const fetchUserData = async () => {
           isLoading = true;
           try {
               const response = await fetch('your - api - url');
               if (!response.ok) {
                   throw new Error('Network response was not ok');
               }
               userData = await response.json();
               error = null;
           } catch (e) {
               error = e;
           } finally {
               isLoading = false;
           }
       };
       // 页面加载时调用
       fetchUserData();
   </script>
   

   • userData用于存储成功获取的用户数据，初始值为null。
   • isLoading用于表示数据加载状态，初始值为false，开始获取数据时设为true，获取完成（无论成功或失败）设为false。
   • error用于存储获取数据过程中发生的错误，初始值为null。

2. 在不同状态下更新视图：

   • 加载中状态：

     {#if isLoading}
         <p>Loading user data...</p>
     {:else if error}
         <p>Error: {error.message}</p>
     {:else if userData}
         <pre>{JSON.stringify(userData, null, 2)}</pre>
     {/if}
     

     • 当isLoading为true时，显示“Loading user data...”，表示数据正在加载。
   • 获取数据失败状态：
     • 当error不为null时，说明获取数据失败，显示错误信息{error.message}。
   • 成功获取数据状态：
     • 当userData不为null且isLoading为false、error为null时，显示用户数据。这里使用<pre>标签格式化显示JSON数据，实际应用中可以根据数据结构进行更友好的展示，比如使用列表、表格等组件展示用户信息。