generator函数+yield+Promise搭配使用（顺带回顾react框架的dva）

写react代码、或者写 dva.js框架的时候，经常会用到generator函数（经过封装 call、put） 主要很久没写generator函数和react了，特此回顾下。

/*
  1.先定义一个generator函数 + 搭配 Promise语法。
  2.再使用yield 返回出Promise
  3.由于使用fn(5).next().value接收的是个Promise，所以就可以使用then了
  4.react 里面的yelid 看不到.next().value 这种，说明被封装过了
*/

/*
  1.先定义一个generator函数 + 搭配 Promise语法。
  2.再使用yield 返回出Promise
  3.由于使用fn(5).next().value接收的是个Promise，所以就可以使用then了
  4.react 里面的yelid 看不到.next().value 这种，说明被封装过了
*/
function* fn(v){
      yield  new Promise((resolve, reject) => {
            if(v>=1){
                 resolve('大于1');
            }else{
                reject('小于1');
            }
         
  });
}

console.log(fn(5).next().value); //打印出：[object Promise]，所以可以使用then()函数了

let fn2=fn(5).next().value;

fn2.then((v)=>{
  console.log(v); //打印出：大于1 或者 小于1
});

 下面的是dva.js框架里面的写法

1.说明dispatch返回的是promise

// 业务组件 e.g: Tags.js
dispatch({
  type: 'user/add',
  payload: {}, // 需要传递的信息
})
 .then(result => {
   console.log('Tags result', result);  
 })

// model层 e.g: user.js
*add({ payload }, { call, put }){
    const response = yield call(addTags, payload);
                         //call请求,里面的yelid 看不到.next().value 这种，说明被封装过了
	const { code, msg } = response;
	if(code === 200) {
		//接口调用成功
		// do something...
		return true;	//	通过return给dispatch返回回调结果！
	}else {
		//接口调用失败
		// do something...
		return false;
	}
}