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

北溟の魚

于 2021-05-27 16:08:59 发布

阅读量450

点赞数

CC 4.0 BY-SA版权

分类专栏： React 框架

本文链接：https://blog.csdn.net/kongcheng_001/article/details/117331041

本文介绍了如何在React应用中结合Hooks、axios和Ant Design，利用TypeScript编写代码，实现在发送接口请求时显示loading效果，请求失败或完成时隐藏loading。重点在于如何在请求生命周期中正确控制loading的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件后缀为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