react Hooks+axios+antd+TypeScript，简单实现接口请求loading效果

古城微笑少年丶 2022-10-16 06:24 78阅读 0赞

文件后缀为tsx  
发送请求时showLoading(), 请求失败hideLoading()

import ReactDOM from 'react-dom';
    import axios from 'axios';
    import Qs from "qs";
    import { Spin} from "antd";
    
    const Axios = (url:string,method:any='get',params:{ }={ }, isAuth:boolean=false)=>{ 
        const BaseUrl = process.env.REACT_APP_API_RUL;
        const token = localStorage.getItem('__auth_provider_token__');
        // let navigate = useNavigate();
        if(sessionStorage.getItem("__auth_provider_isLogin__") !== '1' && isAuth && !token){ 
            alert('token失效');
            // navigate('/login');
            return new Promise((resolve, reject) => { });
        }
        // 当前正在请求的数量
        let requestCount = 0
    
        // 显示loading
        function showLoading () { 
            if (requestCount === 0) { 
                let dom = document.createElement('div')
                dom.setAttribute('id', 'loading')
                document.body.appendChild(dom)
                ReactDOM.render(<Spin tip="正在拼命获取数据，请稍后..." size="large"/>, dom);
            }
            requestCount++
        }
    
        // 隐藏loading
        function hideLoading () { 
            requestCount--
            if (requestCount === 0) { 
                document.body.removeChild(document.getElementById('loading') as Node);
            }
        }
    
        // const [loading, setLoading] = useState(false);
        showLoading();
        const response = axios({ 
            baseURL: BaseUrl,
            url: url,
            method: method || 'get',
            // mode: 'cors',
            // cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
            // `headers` 是即将被发送的自定义请求头
            headers: { 
                'Content-Type': 'application/json;charset=UTF-8',
                // 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8', // 指定提交方式为表单提交
                // 'Content-Type' :'multipart/form-data;charset=UTF-8',
                'Accept': 'application/json', // 通过头指定，获取的数据类型是JSON 'application/json, text/plain, */*',
                // 'Access-Control-Allow-Origin': 'true',
                // 'Access-Control-Allow-Credentials': 'true',
                'X-Requested-With': 'XMLHttpRequest',
                'Authorization': 'Bearer ' + token
                // 'Cross-Origin-Embedder-Policy': 'require-corp',
                // 'Cross-Origin-Opener-Policy': 'same-origin'
            },
            // `params` 是即将与请求一起发送的 URL 参数
            // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
            params: method==='get'? params || { } : { },
            // `paramsSerializer` 是一个负责 `params` 序列化的函数
            // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
            paramsSerializer: function(params) { 
                return Qs.stringify(params, { arrayFormat: 'brackets'})
            },
            // `data` 是作为请求主体被发送的数据
            // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
            // 在没有设置 `transformRequest` 时，必须是以下类型之一：
            // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
            // - 浏览器专属：FormData, File, Blob
            // - Node 专属： Stream
            data: method==='post'? params || { } : { },
            // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
            // 如果请求话费了超过 `timeout` 的时间，请求将被中断
            timeout: 9000,
            // `withCredentials` 表示跨域请求时是否需要使用凭证
            withCredentials: false, // default 为true则产生跨域
            // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
            responseType: 'json', // default
        });
        return new Promise((resolve, reject) => { 
            response.then(response => { 
                hideLoading();
                // setLoading(true);
                resolve(response);
            })
            .catch(error => { 
                reject(error)
            }).finally(() => { 
                hideLoading();
                // setLoading(false);
            })
        });
    }
    
    export default Axios;

写在全局的loading样式CSS样式

#loading { 
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(250, 250, 250, 0.65);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      font-size: 20px;
    }