React

自定义Hooks网络请求

2020-12-14  本文已影响0人  RemenberMe

/**
 * @Auther: 1580043700@qq.com
 * @Date: 2020/12/3 14:19
 * @Description: 自定义Hooks网络请求,
 */
import {useEffect, useState} from 'react';

/**
 * 自定义Hooks网络请求,
 * @param promise ajax请求
 * @returns {{data: object|number|boolean|string, loading: boolean, error: string}}
 */
export default function useRequest(promise, params = {}) {
    let [loading, setLoading] = useState(false);
    let [data, setData] = useState({});
    let [error, setError] = useState('');

    useEffect(() => {
        setError('');
        setLoading(true);

        promise(params)
            .then(({payload}) => {
                setLoading(false);
                setData(payload);
            })
            .catch((err) => {
                setLoading(false);
                setError(err?.msg || `服务器异常,请稍后重试,code:${err.code}`);
                // 这里可以放一个toast提示
                console.error('请求失败', err);
            });
    }, [params]);

    return {data, loading, error};
}



上一篇下一篇

猜你喜欢

热点阅读