Vue 3 使用异步 json 设置反应式获取

Question

我已经安装了 Vue 3 并希望使用从 JSON API 获取的内容来填充反应式对象。

我的组件如下所示。我没有收到任何错误，但也没有得到任何结果。

<template>
  <div>
    {{ state.test.total }}
  </div>
</template>

<script>
import { reactive } from "vue";

export default {
  setup() {
    const state = reactive({
      test: null,
    });

    state.test = async () => {
      return await fetch("https://api.npms.io/v2/search?q=vue");
    };

    return {
      state,
    };
  },
};
</script>

我希望在屏幕上得到一个数字，因为这total是 JSON 文件中的内容。

在 state.test

如果我只输出，state.test我会得到下面的输出。

function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }

知道如何解决它吗？

Answer 1

当你这样做时：

a = async function test() {
}

您正在为您的州分配一个功能。但如果你这样做

a = (async function test() {
})();

您仍在为 分配一个承诺a，而不是一个值。如果你想分配一个值，你需要解决这个承诺：

funcResult = await a;

您的设置函数不是应该在组件生命周期内执行的代码的合适位置。您可以将设置函数视为组件的工厂。因此 setup 函数应该始终是同步的（没有异步关键字），否则 vue 将不知道在 setup 解析时它应该显示什么。幸运的是，您可以在组合 API 中使用钩子：

import { onMounted, reactive } from "vue";

export default {
  setup() {
    const state = reactive({
      test: null,
    });


    onMounted(async () => {
      const response = await fetch("https://api.npms.io/v2/search?q=vue");
      state.test = await response.json();
    });


    return {
      state,
    };
  },
};

编辑

考虑到@boussadjra-brahim 的回答，您实际上可以定义异步设置函数，但前提是您使用<Suspense>. 所以你可以选择这个或那个变体。