generator函数
1. generator函数为es6中暴露的解决异步编程的一种方式<可理解为可人为控制函数的执行，人为中断函数执行>
2. 该函数为了区别于普通函数，在function关键字后增加了 * 加以区分
3. 普通函数被调用会立马执行，直到遇见return结束；
而generator函数的调用会返回一个遍历器对象，通过(将调用结果赋值给某个变 量).next()的方式继续调用，遇到yield就会暂停(可返回yield 后的内容)；
如果此时再次 执行next()，则会再次触发下次执行。
/**
* 普通函数 <声明 - 调用>
*/
function fn(){
return 'string'
}
//调用
fn(); //'string'
/**
* generator函数 <声明 - 调用 - 执行<采用next执行>(多次)>
* .next()的执行会返回{value:该值为yield后的内容,done:该值为布尔，为true时函数执行完毕，为false
* 则标识函数仍有内容可继续调用}
*/
function* gen(){
yield 'A';
console.log('执行第二次yield');
yield 'B';
yield 'C';
return 'D';
}
//调用 <此时函数内部不用执行任何内容，即使第一行增加console也不会输出>
const _ge = gen();
//执行
ge.next();// {value: 'A', done: false}
ge.next();// 执行第二次yield //{value: 'B', done: false} <执行两部分>
ge.next();// {value: 'C', done: false}
ge.next();// {value: 'D', done: true} <此时函数执行结束，所以在done返回true>
Dva初识
1. 需要先确保项目中有dva(cnpm install dva)
2. umi项目中需要配置开启dva(于.umirc.ts中增加dva:{}即可)
3. 约定式model(默认访问/src/model目录下的内容)
3. 与视图组件关联(React-Redux中的connect进行关联),如果对于connect的连接操作不是很清楚，可以前往(http://t.csdn.cn/quRJL)，进行参阅，其中有较为详细且易懂的讲解
//src/models/exampleModel.js
/*
* 该文件为一个标准的model层
* 为了后续方便讲解，该model会完善为一个包含基础业务逻辑的model层
*/
export default {
//<唯一>标识model，后续在视图组件中会用到，加以区分多个model<model的命名空间>
namespace:'exampleModel',
//model中的数据变量，类似于vue中的data(){}
state:{
count:0,//用于存储一个数量值
data:[],//存储异步获取的数据
},
//<同步action>，主要是用来修改state中的数据
reducers:{
/**
* 用于更新state中的数据，通过dispatch进行触发(该函数为纯函数，仅支持进行state的更新)
* @param {Object} state 上方定义的state数据
* @param {Object} payload 传递进来需要进行更新的数据
* @return {Object} 返回修改后的state数据
*/
updateSate(state,{payload}){
return {...state,...payload}
},
//用于单纯计算的reducer
addReducer: (state, { payload }) => {
return { count: payload + state.count }
},
},
//<异步action>，主要用来发送异步请求
effects:{
/**
* 用于异步的数据交互，方法可通过外部引入
* @param {Object} payload 传递进来的参数
* call: 用来发送promise请求 <yield call(request,payload)>
* put：用来触发action<发送dispatch> <yield put({type:'xxx',payload:{}})>
* select: 用来获取state的数据内容 <yield select(state=>state.data)>
* all: 类似于Promise.all，批量请求 <yield all([]>
*/
* syncPromise({payload},{call,put,select}){
//requestMeR为外部导入的promise请求(位于src/services/exampleService.js目录下，下方会有代码标注)
const {data} = yield call(requestMeR,payload)
//将接口中返回的数据存储于state中
yield put({type:'updateSate',data})
//将刚才存储的数据，取出来验证是否存储成功
const d = yield select(state=>state.exampleModel.data)
console.log(d);
}
},
//常规用于当前model所在的视图层加载，用于监听当前路径等一系列的操作
//或者执行一些页面默认加载就需要触发的动作
subscriptions:{
setup({dispatch,history,query}){
history.listen(({pathName})=>{
//...do something
})
}
}
}
//src/services/exampleService.js
//需要用到umi内置的request方法
import {request} from 'umi';
//获取列表数据
export const requestMeR = async (params) =>{
return request('/api/queryTableData',{
methods:'get',
params
})
}
