umi+dva+antd后台管理系统(5)---dva loading

在开始增删改查之前，我又加了个加载数据的loading效果~ 这篇附带promise和生成器函数
源码在这儿MyGithub，觉得不错留颗小星星哦~

1. loading效果

loading
其实也不难，我的思路是：初始化设置loading为false，在发起网络请求的时候更新为true，展示加载状态，待数据请求过后，同步数据的时候，loading重新设置为false即可。然后UI组件那边负责接收这个loading和展示这个 loading即可。

models：
export default {
  namespace: 'product',
  state: {
    products: [],
    loading:false
  },
  reducers: {
    save(state, { payload }) {
      return { ...state, ...payload,loading:false};
    },
    showLoading(state,action){
      console.log("网络请求里改变loading的状态了")
      return{...state,loading:true}
    }
  },
  effects: {
    *loadData({ payload }, { call, put }) {
      yield put({type:'showLoading'})
      const result = yield call(list);
      yield put({
        type: 'save',
        payload: {
          products: result.data,
        },
      });
    },
  },
};

render:
const { products ,loading} = this.props;
···
return (
      <div>
        <Table  ··· loading={loading} ··· />,
      </div>
    );

注意：
1. 这个更新为true一定要在你发请求之前，道理大家都懂
2. 数据加载很快可能不太明显，想清晰的看自己的缓冲效果可以加个延时器
3. effect里的异步函数用生成器函数写，后面要跟Promise类型的函数体，所以，延时器这么加，如下：

export const list =()=>{
  return new Promise((reslove, reject)=>{
    setTimeout(()=>{
      instance.GET('/api/detail')
      .then(res=>{
        reslove(res)
      })
    },10000)
  })
  // return instance.GET('/api/detail')
}

2. loading 写完了，来说说Promise和生成器函数

promise

Js是单线程的，Promise解决就是异步编程一种思想，比传统的回调函数和事件强大好多。
Promise,简单来说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果，从语法上说Promise是一个对象，从它可以获取异步操作的信息。

Promise对象的状态不受外界影响：

penging :进行中
fulfilled :已经成功
rejected :已经失败
状态改变：
Promise对象的状态改变，只有两种可能：

从pending变成fulfilled
从pending变成rejected

基本用法：Promise对象是一个构造函数，用来生成Promise实例

const promist = new Promise(function(resolve,reject){
	if(/异步操作成功/){
			resolve(value);
		}else{
			reject(error);
		}
	})

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Generator

在异步编程中，还有一种常用的解决方案，它就是Generator生成器函数。顾名思义，它是一个生成器，它也是一个状态机，内部拥有值及相关的状态，生成器返回一个迭代器Iterator对象，我们可以通过这个迭代器，手动地遍历相关的值、状态，保证正确的执行顺序。

声明
generator的声明方式类似一般的函数声明，只是多了个*号，并且一般可以在函数内看到yield关键字

function* showWord(){
	yield 'one';
	yield 'two';
	return 'three';
}
var show = showWords();
show.next();
show.next();
show.next();
show.next();

如上代码，定义了一个showWords的生成器函数，调用之后返回了一个迭代器对象（即show）

调用next方法后，函数内执行第一条yield语句，输出当前的状态done（迭代器是否遍历完成）以及相应值（一般为yield关键字后面的运算结果）

每调用一次next，则执行一次yield语句，并在该处暂停，return完成之后，就退出了生成器函数，后续如果还有yield操作就不再执行了

哈哈，promise和生成器函数这段转载别人的~，这里有地址：Here~，待我有空了，把我自己总结的发一发，我有一大堆呢，哼哼~ 我看这个和我理解的差不多，先用用。