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>

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

开启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); } 函数_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 函数不适合在组件的生命周期内执行代码。您可以将 setup 函数视为组件的工厂。因此 setup 函数应该始终是同步的（没有 async 关键字），否则 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> 包装您的组件。所以你可以选择这个或那个变体。

Answer 2

您应该将async 添加到设置选项，将await 添加到获取功能，并通过Suspense 组件包装您的模板内容：

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

<script>
import { reactive } from "vue";
export default {
  async setup() {
    const state = reactive({
      test: null,
    });

    try{
      state.test =  await fetch("https://api.npms.io/v2/search?q=vue");
     } catch (err) {
       console.error(err)
   }

    return {
      state,
    };
  },
};

Answer 3

我认为最好不要wait。

示例：

<template>
    <div>
        {{ state }}
    </div>
</template>


<script>
import { ref } from 'vue';

export default {
    setup() {
        const state = ref({});

        fetch('https://api.npms.io/v2/search?q=vue')
            .then(response => response.json())
            .then(data => state.value = data);

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