VueJs Async Api Data 最佳实践答案

【问题标题】：VueJs Async Api Data best practiceVueJs Async Api Data 最佳实践
【发布时间】：2021-03-06 20:14:12
【问题描述】：

我正在 NuxtJs 中构建一个无头 SPA SSR，我想知道什么是确保应用程序仅在与远程 API 建立连接时才加载的最佳实践。

目前这是我的 index.vue 组件：

<template>
<div class="wrapper">
  <div class="content">
    <div class="title">
      <h1>{{site.meta.title}}</h1>
    </div>
  </div>
</div>
</template>

<script>
import Meta from '../classes/api/General/Meta'

export default {
  data () {
    return {
      meta: null
    }
  },
  created () {
    Meta.getMeta().then((response) => {
      this.meta = response.data
    })
  }
}
</script>

这有时会解决 site.meta.title 未定义，因为该站点在 api 数据初始化之前加载。是的，site.meta.title 是在 api 的底层定义的。所以。我想的下一步是使用如下脚本的异步：

<script>
import Meta from '../classes/api/General/Meta'

export default {
  data () {
    return {
      meta: null
    }
  },
  async created () {
    await Meta.getMeta().then((response) => {
      this.meta = response.data
      console.log(response.data.site.logo)
    })
  }
}
</script>

虽然这也无济于事。

但是v-if="meta" 确实有帮助。虽然：现在看来 Axios 不再渲染代码（ssr）中的内容了。

【问题讨论】：

什么是headless SPA SSR？无头意味着没有前端，比如无头 CMS，这里是 Nuxt，所以你确实有一个前端。一个 SPA + SSR 应用被称为通用应用，甚至是同构的。

标签： vue.js nuxt.js load

【解决方案1】：

console.log 不是您真正可以 100% 信任的东西，用于异步调试 tbh。
console.log(JSON.parse(JSON.stringify())) 可以提供更多帮助，但有时它仍然存在一些缺点。

至于最佳实践，beforeCreate 和 created 都在两侧（服务器 + 客户端）上运行，因此可以使用它们。您还可以使用asyncData 和新的fetch（它是 Nuxt 挂钩，而不是实际的 fetch API）。

注意正确使用async/await 语法（此处不需要then）：

async created() {
  const response = await Meta.getMeta()
  this.meta = response.data
  console.log(this.meta)
}

另外，如果有正确的async/await，这件事永远不会发生

因为网站在 api 数据初始化之前加载

您可以在此处阅读有关 Nuxt 生命周期的更多信息：https://nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle

我建议通常使用async fetch() 方式（非阻塞，好帮手），或者如果您需要阻塞方法，则使用async asyncData()。中间件也有助于使整个过程在您的应用程序周围更加灵活。

您可以在这里获得fetch 与asyncData 之间差异的完整解释：https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/

如果您想了解如何在现实场景中使用 fetch 的示例，您可以阅读以下内容：https://nuxtjs.org/blog/build-dev-to-clone-with-nuxt-new-fetch/

【讨论】：

【解决方案2】：

所以，事实证明我完全错误地解决了这个问题。在最新的 nuxt 版本中，现在包含（内置）异步 fetch 方法。

这样，所有渲染等都可以正常工作并按预期进行。我结束的工作代码现在看起来像这样：

<script>
export default {
  async fetch () {
    this.meta = await fetch(
      'https://testurl.com/meta'
    ).then(res => res.json())
  },
  data () {
    return {
      meta: null
    }
  }
}
</script>

而 fetch 的美妙之处在于，您可以像这样添加侦听器：

<p v-if="$fetchState.pending">Fetching site</p>
<p v-else-if="$fetchState.error">Error happened</p>
<p>This content will be rendered server side even though waiting time</p>

我只是发布这个，因为我最初的问题有点错过解释，希望能帮助别人。

编辑： 我已将 Kissu 标记为答案（在我创建此帖子后确实看到了帖子），因为它被解释得很好而且做得很好！谢谢:-)

【讨论】：