关于onSuccess等回调函数是否可以支持写在useHook的配置中

[panghujiajia]

需要新特性解决什么问题？

主要解决组件中有n个请求的命名问题
例如：
const {onSuccess} = useRequest(request1);
const {onSuccess: onSuccessRequest2} = useRequest(request2);
const {onSuccess: onSuccessRequest3} = useRequest(request3);
const {onSuccess: onSuccessRequest4} = useRequest(request4);

取别名没有问题，但是相对繁琐

你期望的新特性应该如何呈现？

期望能像这样，直接在配置中定义回调
useRequest(request1, {
onSuccess(){}
});
useRequest(request2, {
onSuccess(){}
});
useRequest(request...n, {
onSuccess(){}
});

它对你有多重要？

可以让我更便于开发

[JOU-amjs]

我们目前有一个提案是这样的，通过链式调用来解决，你觉得如何

const { data, loading } = useRequest(request1).onSuccess(...).onError(...).onComplete(...)

@panghujiajia

[panghujiajia]

我们目前有一个提案是这样的，通过链式调用来解决，你觉得如何

const { data, loading } = useRequest(request1).onSuccess(...).onError(...).onComplete(...)

@panghujiajia

我个人觉得这里返回的data、loading等并非依赖onSuccess的执行结果，onSuccess只是用来在接口返回结果的时间点做一些操作，用法上类似于middleware函数。

而链式调用通常是处理某些逻辑，并返回某个值，返回值跟链式调用是相关联的。

所以我觉得放在config里面比较合理一些。

[JOU-amjs]

好的，这确实是一个不错的可选项，在这之前我也再问问大伙的意见，综合下😁

[yangdinghai]

现有的方式就很好呀，同层级处理很优雅了，如果放到回调里面，那比如要在第一个接口调用成功后再调用第二个接口，再依次类推，第三个，第四个...，岂不是出现了地狱回调？回顾一下过去的处理方式，为了解决地狱回调，出现了链式调用方式，为了解决链式调用的不优雅，出现了async和await，为了解决async和await中处理异常的不方便，于是又出现了其他方案，比如 await-to-js 等等，现有的解构方式很好的避开了这些问题，而解构重命名的方式要比地狱回调要优雅的多呢

[yangdinghai]

数组解构可以解决对象解构重命名的繁琐，但是这里显然不合适，因为这里可以解构的内容太多，不适合使用数组，我测试了一下，onSuccess 是支持设置多个处理函数的，内部使用队列处理也很合理，目前看来当前的方案已经是最优的方案了，当然技术在持续更新，或许以后会有更优的方案也不一定

[panghujiajia]

现有的方式就很好呀，同层级处理很优雅了，如果放到回调里面，那比如要在第一个接口调用成功后再调用第二个接口，再依次类推，第三个，第四个...，岂不是出现了地狱回调？回顾一下过去的处理方式，为了解决地狱回调，出现了链式调用方式，为了解决链式调用的不优雅，出现了async和await，为了解决async和await中处理异常的不方便，于是又出现了其他方案，比如 await-to-js 等等，现有的解构方式很好的避开了这些问题，而解构重命名的方式要比地狱回调要优雅的多呢

怎么会呢，你说的1依赖2，2依赖3，如下不就行了吗，不理解你说的怎么会出现地狱回调

useRequest(request1, {
onSuccess(){
run2()
}
});
useRequest(request2, {
onSuccess(){
run3()
}
});
useRequest(request...n, {
onSuccess(){
run4()
}
});

[MeetinaXD]

假如回调函数放在 hook 的配置中，那么导出的各个状态值也需要重新思考如何设计了。

在 alova 的测试用例中，有时会有多个 hook 同时使用的情况。我们通常是这样避免解构重名的：

import { useRequest } from 'alova'

const state1 = useRequest(alovaInst.Get('/url-a'))
const state2 = useRequest(alovaInst.Get('/url-b'))

state1.onSuccess(() => { /* ... */ })
state2.onSuccess(() => { /* ... */ })

然后使用响应状态

<template>
  <div>{{ state1.loading ? 'loading' : 'done' }}</div>
</template>