Vue composition API value set，但在catch中仍然为null

Question

我已经创建了这样的逻辑，即在执行它的快乐路径时，一切正常。但是当出现错误时，我想在界面上显示出来。我的代码看起来像这样（修剪）：

export function initCamera() {
  const loaded = ref(false);
  const cameras = ref([]);
  const error = ref(null);

  someTask().then((response) => {
      cameras.value = response;
  loaded.value = true;
    })
    .catch((error) => {
      console.log("we got an error", error);
  loaded.value = true;
      error.value = error;
      console.log(error.value);
    });

  return { loaded, cameras, error };
}

如果没有错误，则接口确实可以访问 cameras，并且 loaded 标志设置为 true。如果出现错误，它会设置 loaded 标志，但 error 始终为空。

您在那里看到的所有控制台日志都显示一个值。我的组件如下所示：

export default defineComponent({
  name: "TheScanner",
  directives: {
    content,
  },
  emits: ["onExpand"],
  setup() {
    let init = false;
    const result = reactive({ loaded: Boolean, cameras: null, error: null });
    const expanded = ref(false);
    const instance = getCurrentInstance();

    const expand = (value: boolean) => {
      expanded.value = value;
      instance.proxy.$emit("onExpand", value);
    };

    watch(
      () => expanded.value,
      (value) => {
        if (!value || init) return;
        init = true;
        Object.assign(result, initCamera());
        console.log(result);
      }
    );

    return { expanded, expand, ...toRefs(result) };
  },
});

如您所见，我已将结果设置为反应式属性并使用 Object.assign将我的回应分配给它。该控制台日志将显示 cameras 和 loaded 布尔值，但从不显示错误。它始终为空。

有人知道为什么吗？

Answer 1

将变量名'error'改成别的，因为你在上面声明了另一个名为'error'的变量，即ref。在 catch 块中，变量 'error' 指向错误对象，而不是 ref.

export function initCamera() {
  const loaded = ref(false);
  const cameras = ref([]);
  const error = ref(null);

  someTask().then((response) => {
    cameras.value = response;
    loaded.value = true;
  })
  // Pay attention to this line
  .catch((err) => {
   console.log("we got an error", err);
   loaded.value = true;
   error.value = err;
   console.log(error.value);
  });

  return { loaded, cameras, error };
}

Vue composition API value set，但在catch中仍然为null

Vue composition API value set, but still null in catch

vuejs2

promise

vue-composition-api

vue-reactivity