useFetch

用于发起请求的hook，支持数据success回调、error回调、finally回调。

一般会在项目中重写该hook，因为每个项目的api接口返回结构不同，可参考下面的源码进行修改。

代码示例

useFetch({
  request: () => axios.get('/api'),
  onSuccess: (data) => {
    console.log('success callback', data);
  },
  onError: (err) => {
    console.error('error callback', err);
  },
  onFinally: () => {
    console.log('finally callback');
  },
  codeField: 'code', // 服务器状态码字段
  dataField: 'data', // 服务器数据字段
});

参数

参数	说明	类型	默认值	是否必填
request	必填项，请求数据的函数	() => Promise<AxiosResponse<any>>	-	是
onSuccess	必填项，请求成功的回调函数	(data: any) => void	-	是
onError	可选项，请求失败的回调函数	(err: any) => void	-	否
onFinally	可选项，请求结束的回调函数	() => void	-	否
codeField	可选项，服务器状态码字段	string	code	否
dataField	可选项，服务器数据字段	string	data	否

源码

import type { AxiosResponse } from "axios";

export interface UseFetchOptions {
    request: () => Promise<AxiosResponse<any>>;
    onSuccess: (data: any) => void;
    onError?: (err: any) => void;
    onFinally?: () => void;
    codeField?: string; // 服务器状态码字段
    dataField?: string; // 服务器数据字段
}

// 封装请求的公共函数
export const useFetch = ({
    request,
    onSuccess,
    onError,
    onFinally,
    codeField = 'code',
    dataField = 'data',
}: UseFetchOptions) => {

    // 参数校验
    if (!request) {
        throw new Error('useFetch: request is required');
    }
    if (!onSuccess) {
        throw new Error('useFetch: onSuccess is required');
    }

    request().then((res) => {
        if (![0, 200].includes(res.data[codeField])) {
            onError && onError(res.data);
            return;
        }
        onSuccess(res.data[dataField]);
    }).catch((err) => {
        onError && onError(err);
    }).finally(() => {
        onFinally && onFinally();
    })
}