Svelte从API获取数据后无法赋值给变量问题排查

我自行开发了一个API，返回数据如下：

[{"id":1,"title":"Illmatic","artist":"Nas","songs":["The Genesis","N.Y. State Of Mind","The World Is Yours"],"offer":25.01,"offer_owner":123456,"due_date":1669593600000,"genre":"hiphop","auction_owner":696969}, 
{"id":2,"title":"Life After Death","artist":"The Notorious B.I.G.","songs":["Intro","Things Done Changed","Gimme The Loot"],"offer":25,"offer_owner":696969,"due_date":1669593600000,"genre":"hiphop","auction_owner":123456},
{"id":3,"title":"After Hours","artist":"The Weekend","songs":["Alone Again","After Hours","Save Your Tears","Escape From LA","Snowchild"],"offer":25,"offer_owner":123456,"due_date":1369593600000,"genre":"pop","auction_owner":696969}]

我编写了如下Svelte代码：

import { onMount } from "svelte";

let albums;

onMount(async () => { 
fetch("http://localhost:8080/api/albums/").then((response) => response.json().then( 
(data) => albums = data 
// console.log(data) returns data )); 
});

console.log(albums); // returns undefined?

问题说明：从API获取数据时，data变量能正常拿到数据，console.log(data)会返回包含3条数据的数组。但将data赋值给albums变量后，脚本最后一行的console.log(albums)却返回undefined，不知道问题出在哪。

问题原因 #

这是异步操作的执行顺序问题：

• fetch属于异步任务，浏览器会先执行同步代码，再在空闲时处理异步请求的响应。脚本中的console.log(albums)是同步代码，会在onMount里的异步请求完成前就执行。
• 当console.log(albums)运行时，albums还未被赋值，所以输出undefined；后续请求完成后albums才会被正确赋值，但此时那个console.log已经执行完毕。

修复后的代码 #

编辑：已解决问题，修复后的代码如下

<script>
  import { onMount } from "svelte";

  let albums;
  let hasData;

  onMount(async () => {
    fetch("http://localhost:8080/api/albums/")
      .then((response) => response.json())
      .then((data) => {
        albums = data;
        hasData = true;
      });
  });
</script>

{#if hasData}
  {#each Object.values(albums) as album}
    {album.title}
  {:else}
    <p>Loading...</p>
  {/if}

修复要点 #

1. 修正了then的链式调用写法，让代码结构更清晰，避免嵌套逻辑混乱；
2. 添加hasData状态变量，控制页面渲染流程：数据未加载时显示加载提示，加载完成后再遍历albums渲染内容，避免因albums未定义导致的渲染错误；
3. 异步赋值albums后，Svelte的响应式系统会自动更新视图，无需额外手动触发。

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