react如何控制全局loading_React项目实现全局 loading 以及错误提示

前言

在项目中使用 loading，一般是在组件中用一个变量( 如isLoading)来保存请求数据时的 loading 状态，请求 api 前将 isLoading 值设置为 true，请求 api 后再将 isLoading 值设置为 false，从而对实现 loading 状态的控制，如以下代码：

import { Spin, message } from 'antd';

import { Bind } from 'lodash-decorators';

import * as React from 'react';

import * as api from '../../services/api';

class HomePage extends React.Component {

state = {

isLoading: false,

homePageData: {}，

};

async componentDidMount () {

try {

this.setState({ isLoading: true }, async () => {

await this.loadDate();

});

} catch (e) {

message.error(`获取数据失败`);

}

}

@Bind()

async loadDate () {

const homePageData = await api.getHomeData();

this.setState({

homePageData,

isLoading: false,

});

}

render () {

const { isLoading } = this.state;

return (

hello world

);

}

}

export default HomePage;

复制代码然而，对于一个大型项目，如果每请求一个 api 都要写以上类似的代码，显然会使得项目中重复代码过多，不利于项目的维护。因此，下文将介绍全局存储 loading 状态的解决方案。

思路

封装 fetch 请求(传送门👉：react + typescript 项目的定制化过程)及相关数据请求相关的 api

使用 mobx 做状态管理

使用装饰器 @initLoading 来实现 loading 状态的变更和存储

知识储备

本节介绍与之后小节代码实现部分相关的基础知识，如已掌握，可直接跳过🚶🚶🚶。

@Decorator

装饰器(Decorator)主要作用是给一个已有的方法或类扩展一些新的行为，而不是去直接修改方法或类本