TypeScript封装react-hook公共请求函数useAxios

2024-01-17 19:47:52

引言

使用React函数组件搭配React Hook外加TypeScript这样的组合方式去完成功能需求已经有一年多的时间了，对Hook从陌生到熟悉的过程中，个人也感觉受益良多。不得不说，React Hook采用声明式的语法定义相关变量，独立于函数存放的方式去引入状态并进行控制的代码逻辑，让代码的可读性与可维护性都大大提高，对于代码工程的长期维护具有重大的意义。

一、useAxios函数的封装

函数签名

const useAxios = (config?: AxiosRequestConfig): {
    run: (data?: any) => Promise<AxiosResponse<any>>;
    errors: AxiosError<any> | null;
    loading: boolean;
};

参数说明

config：可选参数，用于配置Axios请求。可以传入AxiosRequestConfig类型的对象，包括url、method、data等属性。

返回值说明

run：用于发送Axios请求的函数。它接受一个可选参数data，用于发送请求体。它返回一个Promise，解析后得到AxiosResponse类型的对象。
errors：存储Axios请求错误信息的变量。它是一个AxiosError类型的对象，或者为null。
loading：表示请求是否正在加载的布尔变量。

二、useAxios函数的使用

基本用法

const { run, errors, loading } = useAxios({
    url: 'https://example.com/api/v1/users',
    method: 'GET',
});

run().then((res) => {
    console.log(res.data);
}).catch((err) => {
    console.log(err.message);
});

使用自定义配置

const { run, errors, loading } = useAxios({
    url: 'https://example.com/api/v1/users',
    method: 'POST',
    data: {
        name: 'John Doe',
        email: 'johndoe@example.com',
    },
});

run().then((res) => {
    console.log(res.data);
}).catch((err) => {
    console.log(err.message);
});