时间戳

首页 > 解决方案 > Vue 3 使用异步 json 设置响应式获取

javascript - Vue 3 使用异步 json 设置响应式获取

问题描述

我已经安装了 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>

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

上state.test

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

函数 () { 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); }); }

知道我该如何解决吗？

标签： javascriptvue.jsasync-awaitfetchvuejs3

解决方案

当你这样做时：

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>. 所以你可以选择这个或那个变体。

推荐阅读