如何结合mutliple vue crencurrency错误？

Question

我正在尝试使用 vue并发与我的vue 3/typepript/quasar app。

而且我正在使用 quasar note 在弹出窗口中显示错误消息。

通知弹出窗口是这样触发的：

import { useQuasar } from 'quasar';
const $q = useQuasar();
const triggerNotification = (errorMessage: string) => {
  $q.notify(errorMessage);
};

现在，我需要一种优雅调用triggerNotification时，只要有VUE-汇率任务错误。

我可以通过在每个任务中的每个yart> targe语句的末尾链接catch来做到这一点。

但是我的代码有许多任务，每个任务都有许多屈服语句。链接捕获每个人看起来都很凌乱。

是否有更好的方法可以为每个任务触发triggerNotification函数？

在这里说明问题是一些示例代码：

<script setup lang="ts">
import { useTask, timeout } from 'vue-concurrency';
import { useQuasar } from 'quasar';
const $q = useQuasar();
const triggerNotification = (errorMessage: string) => {
  $q.notify(errorMessage);
};
const exampleAsyncWithError = async () => {
  await timeout(1);
  throw new Error('Ruh oh! Error.');
};
const example1Task = useTask(function* () {
  yield throwError().catch((err) => {
    triggerNotification(err.message);
  });
  yield throwError().catch((err) => {
    triggerNotification(err.message);
  });
  yield throwError().catch((err) => {
    triggerNotification(err.message);
  });
});
const example2Task = useTask(function* () {
  yield throwError().catch((err) => {
    triggerNotification(err.message);
  });
  yield throwError().catch((err) => {
    triggerNotification(err.message);
  });
  yield throwError().catch((err) => {
    triggerNotification(err.message);
  });
});
const example3Task = useTask(function* () {
  yield throwError().catch((err) => {
    triggerNotification(err.message);
  });
  yield throwError().catch((err) => {
    triggerNotification(err.message);
  });
  yield throwError().catch((err) => {
    triggerNotification(err.message);
  });
});
</script>

<template>
  <q-btn label="Run Task" @click="example1Task.perform">
  <q-btn label="Run Task" @click="example2Task.perform">
  <q-btn label="Run Task" @click="example3Task.perform">
</q-btn>
</template>

我还疲倦地实现了usetaskGroup，并在此结束时使用单个catch。但这行不通，因为usetaskGroup不是“当时”。

也许还有另一个解决方案？

Answer 1

以下文本从此在github上非常有用的答案 VUE并发的创建者：

我认为这取决于您要如何处理错误。我有时也会使用这些弹出通知 - 当没有相关位置显示错误的情况下，尤其是在后台中有些事情中断时，它们适用于情况。

因此，我的工作流确实是90％次 - 显示错误“适当”，并使用task.last.error。在剩下的情况下，我会在任务内尝试 ，并使用triggerNotification之类的东西。

BUF如果您打算大量使用triggernotification，那么尝试这么多的捕获量确实不是最佳选择。

您能做的就是将整个任务执行的操作中包裹起来。

<script setup lang="ts">
import { useTask, timeout } from 'vue-concurrency';
import { useQuasar } from 'quasar';
const $q = useQuasar();
const throwError = async () => {
  await timeout(1);
  throw new Error('Ruh oh! Error.');
};
const exampleTask = useTask(function* () {
  yield throwError().catch((err) => {
    triggerNotification(err.message);
  });
});

const save = async () => {
  try {
   await exampleTask.perform();
  } catch (e) {
    $q.notify(error.message);
}
};
</script>

<template>
  <q-btn label="Run Task" @click="save"></q-btn>
</template>

您将经常创建这些包装器功能，因此您可以为其编写一些更高的订单功能：

const performAndNotify = async (task, ...args) => {
  try {
  await task.perform(...args);
 } catch (error) {
  $q.notify(error.message);
 }
};

然后，您可以在多个位置重复使用此功能。