wait 块中 Svelte 变量的范围

Question

假设我们有这个非常常见的代码：

{#await myPromise then myResult}

  <DataTable rows={myResult.rows}/>

{\await}

假设您需要稍后更新返回的行，或者承诺结果中的任何其他数据。

问题：是否有任何简单的方法来存储对其myResult属性的引用，以便在脚本块中进行处理？我正在使用两种解决方法，但必须有一种更简单的方法。

解决方法#1：根本不使用await 块。使用 fetch().then() 语法并在脚本块中处理所有内容。做作，但它有效。

肮脏的解决方法#2：创建一个愚蠢的函数，它接受 lambda 并始终返回空字符串。像这样调用这个愚蠢的函数：

{#await myPromise then myResult}

  {myStupidFunction(() => { rowsInScript = myResult.rows; })}

  <DataTable rows={myResult.rows}/>

{\await}

由于该函数不返回任何内容，因此它不会影响 HTML 部分。

尽管如此，我还是希望有一种更优雅的方式来实现这一目标。

Answer 1

截至目前，还没有一种非常简单的方法可以做到这一点。

您的选项 1 是最常见的一种，但有一点不同，您将数据分配给 Promise 中的变量，然后丢弃等待块中的返回值。

<script>
  let results;
  async function myPromise() {
    results = await fetch()
  }
</script>
{#await myPromise then _}
  ...
{/await}

你的选项2对我来说看起来非常肮脏，我不会这样做。

但如果这些rowsInScript仅在等待块中使用，您可以使用{@const}?

{#await myPromise then myResult}
  {@const rowsInScript = myResult.rows}
  ...
{\await}

另一种方法（不太常见，因为有点可疑）也是让一个组件获取数据，然后将此数据传递给另一个组件。

{#await myPromise then results}
   <DisplayComponent {...results} />
{/await}

（对于某些用例，您可以将其设为抽象并使用插槽使其更加灵活）