跳到主要内容
版本:v2

处理响应

请求完成后,响应数据会经过多个流程的处理,最终才会在发送请求的位置获得最终数据,流程如下:

当没有抛出错误时,下一个节点会接收到上一个节点的返回值。

转换响应数据

method 详解中,我们已经了解过transformData了,这在 useHook 中使用也非常有用,它可以让 useHook 的 data 接收到转换后的数据,而不用再转换。

const todoListGetter = alovaInstance.Get('/todo/list', {
// 函数接受未加工的数据和响应头对象,并要求将转换后的数据返回,它将会被赋值给data状态。
// 注意:rawData是全局响应拦截器(如果有设置)过滤后的数据,响应拦截器的配置可以参考[设置全局响应拦截器]章节。
transformData(rawData, headers) {
return rawData.list.map(item => ({
...item,
statusText: item.done ? '已完成' : '进行中'
});
}
});
const { data } = useRequest(todoListGetter);
const { data } = useWatcher(() => todoListGetter, [userInfo]);

data 值将接收到转换后的数据格式。

type data = {
// ...
statusText: '已完成' | '进行中';
}[];
注意

在 usehooks 中使用时,在transformData中抛出错误也会触发onError

绑定响应回调

如需设置请求回调,你还可以在 useHooks 的返回参数中接收回调的设置函数,如下:

const {
// ...

// 成功回调绑定
onSuccess,

// 失败回调绑定
onError,

// 完成回调绑定,回调在成功或失败都会调用
onComplete
} = useRequest(todoListGetter); // 也适用useWatcher
onSuccess(event => {
console.log('请求成功,响应数据为:', event.data);
console.log('本次请求的method实例为:', event.method);
console.log('响应数据是否来自缓存:', event.fromCache);
});
onError(event => {
console.log('请求失败,错误信息为:', event.error);
console.log('本次请求的method实例为:', event.method);
});
onComplete(event => {
// event.status在成功时为success,失败时为error
console.log('请求完成,状态为:', event.status);
console.log('本次请求的method实例为:', event.method);
console.log('响应数据是否来自缓存:', event.fromCache);
if (event.data) {
console.log('请求数据:',event.data)
} else if (event.error) {
console.log('错误信息:',event.error)
}
});
注意

onSuccess中抛出错误将会触发onError