dva-loading简单使用

在处理业务时，我们常常会需要处理加载页面，如果当业务繁多时，我们不得不一遍一遍的处理 loading 状态。但是现在 dva-loading 插件可以自动处理 loading 状态，不用再一遍遍地处理 loading 状态，减少了很多工作量。现在我们通过另外一个例子来讲解dva-loading的使用。

dva-loading 的使用方法也非常简单,首先通过 npm 安装。

$ npm install dva-loading —save

在index.js中使用

import createLoading from 'dva-loading';
const app = dva();
...
app.use(createLoading());
...

此时 state 中新增了一个 loading 对象。loading 对象中的 global 属性表示的全局 loading 状态，models 里是每个 model 的 loading 状态。

loading: {
  global: false,
  models: {
    list: false,
    ...
  },
}

这样一来，每次请求期间都会触发 loading 状态，因为 dva-loading 提供了一个 global 属性，通过 conncet 连接
起来，即可通过 global.loading 访问到。可以在最外层组件使用它，也可以在组件内部使用。这样一来就可以全部统一处理 loading状态。

...
render() {
  const {list, loading} = this.props;
  return (
        <div>
          <h2>List</h2>
          <Table columns={columns} dataSource={data} loading={loading.global} />
        </div>
      )
   }
...
export default connect(({list,loading}) => ({list,loading}))(List);

另外一点，当你进行某一请求不需要用到全局的 loading 状态时，可以使用如下方法，进行该请求时，全局loading不会变化。

app.use(createLoading({
  except: [
      ‘list/fetch'
  ]
}));