useRequest中的onBefore如果是一个校验方法，如何在校验不通过的时候，停止request?

Question

 const { loading: saveLoadSt, run: onFinish } = useRequest(onSave, {
    manual: true,
    onSuccess: (result) => {
      void message.success('更新成功！');
    },
    onError: (error) => {
      void message.error(error?.message ?? '接口请求失败~');
    },
    onBefore: async (params) => await validate(params),
  });

Answer 1

如果在onBefore中进行校验，可以在校验不通过的时候抛出一个错误，这样就会触发onError回调函数，从而停止请求。

以下是一个示例代码：

const { loading: saveLoadSt, run: onFinish } = useRequest(onSave, {
  manual: true,
  onSuccess: (result) => {
    void message.success('更新成功！');
  },
  onError: (error) => {
    void message.error(error?.message ?? '接口请求失败~');
  },
  onBefore: async (params) => {
    const isValid = await validate(params);
    if (!isValid) {
      throw new Error('校验不通过');
    }
  },
});

在上面的代码中，如果validate方法返回的结果为false，则会抛出一个错误，从而触发onError回调函数，并停止请求。

Answer 2

根据 VueRequest 的文档及源码可知，插件本身并没有提供 onBefore 中断发起请求的功能。

createQuery 部分源码

context.runAsync = async (...args: P): Promise<R> => {
    setState({
      loading: true,
      params: args,
      status: 'pending',
    });

    count.value += 1;
    const currentCount = count.value;

    const { isBreak, breakResult = resolvedPromise() } = emit('onBefore', args);
    if (isBreak) {
      setState({ status: 'settled' });
      return breakResult;
    }

    onBefore?.(args);

    try {

分析源码可知，如果一定要实现这个需要，可以在 onBefore 中手动 throw Error 从而中断发起请求，示例如下：

function validate() {
  if (...) {
    throw new Error("校验不通过");
  }
}

const { run, data } = useRequest(testService, {
  manual: true,
  onBefore() {
    validate();
  }
});