yield与dva流程控制 [ Luat doc 社区文章静态页面 ]

yield与dva流程控制

dva.js

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

yield

yield是ES6的新关键字，使生成器函数执行暂停，yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的return关键字。
yield关键字实际返回一个IteratorResult（迭代器）对象，它有两个属性，value和done，分别代表返回值和是否完成。
yield无法单独工作，需要配合generator(生成器)的其他函数，如next，懒汉式操作，展现强大的主动控制特性。

迭代器(Iterator)和生成器(Generator)

迭代器：迭代器是一种特殊对象，它具有一些专门为迭代过程设计的专有接口，所有的迭代器对象都有一个next()方法，每次调用都返回一个结果对象。

下面用ES5的语法创建一个迭代器

// ES5迭代器
function createIterator(items) {
    var i = 0;
    return {
        next: function() {
            var done = (i >= items.length);
            var value = !done ? items[i++] : undefined;
            return {
                done: done,
                value: value
            };
        }
    };
}

生成器: 生成器是一种返回迭代器的函数，通过function关键字后的星号(*)来表示，函数中会用到新的关键字yield。

星号可以紧挨着function关键字，也可以在中间添加一个空格。

// 生成器
function *createIterator() {
    yield 1;
    yield 2;
    yield 3;
}
// 生成器能像正规函数那样被调用，但会返回一个迭代器
let iterator = createIterator();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3

在这个示例中，createlterator()前的星号表明它是一个生成器；yield关键字也是ES6的新特性，可以通过它来指定调用迭代器的next()方法时的返回值及返回顺序。生成迭代器后，连续3次调用它的next()方法返回3个不同的值，分别是1、2和3。生成器的调用过程与其他函数一样，最终返回的是创建好的迭代器。

// ES6迭代器
function *createIterator(items) {
    for (let i = 0; i < items.length; i++) {
        yield items[i];
    }
}
let iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"
console.log(iterator.next()); // "{ value: 3, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"
// 之后的所有调用
console.log(iterator.next()); // "{ value: undefined, done: true }"

生成器函数最有趣的部分是，每当执行完一条yield语句后函数就会自动停止执行。

【使用限制】yield关键字只可在生成器内部使用，在其他地方使用会导致程序抛出错误

function *createIterator *(items) {
    items.forEach(function(item) {
        // 语法错误
        yield item + 1;
    });
}

从字面上看，yield关键字确实在createlterator()函数内部，但是它与return关键字一样，二者都不能穿透函数边界。嵌套函数中的return语句不能用作外部函数的返回语句，而此处嵌套函数中的yield语句会导致程序抛出语法错误。

也可以通过函数表达式来创建生成器，只需在function关键字和小括号中间添加一个星号(*)即可

可迭代对象

　可迭代对象具有Symbol.iterator属性，是一种与迭代器密切相关的对象。

Symbol.iterator通过指定的函数可以返回一个作用于附属对象的迭代器。在ES6中，所有的集合对象(数组、Set集合及Map集合)和字符串都是可迭代对象，这些对象中都有默认的迭代器。ES6中新加入的特性for-of循环需要用到可迭代对象的这些功能。

……

简单模拟dva处理effects函数

经过以上对于yield与迭代器的分析，我们可以以call为例模拟dva的处理流程。

遍历model下的effects
遍历effects下的函数

// 模拟业务流程
// models
function* requestCom() {
        let comRes = yield getCommit
        let repRes = yield getReply.bind(this, comRes.id)
        console.log(repRes);
    }
// 获取评论
const getCommit = () => {
        return { id: "1", value: "评论" }
    }
// 根据id获取评论下的回复
const getReply = (id) => {
    if (!id) return null
    return [
        { id: 101, content: "hahah" },
        { id: 102, content: "heheh" },
        { id: 103, content: "huhuh" },
        { id: 104, content: "xixix" },
    ]
}

// dva流程
let resCommIterator = requestCom()
    // TODO fn 类型判断、可迭代判断 ...
    // redux-saga.js
    // createPromiseMiddleware.js
let comValue = resCommIterator.next().value;
let repValue = resCommIterator.next(comValue()).value
let result = repValue()
console.log(comValue());
console.log(repValue());

业务代码中的写法

// models -- comment
* fetch_add_topic({}, { call, put, select }) {
            const commResponse = yield call(get_topic);
            if (ValidResponse(commResponse)) {
				let id = commResponse.data.id
              	const replyResponse = yield call(get_reply, {id});
                if (ValidResponse(commResponse)) {
                  message.success("获取成功！")
                    yield put({
                        type: 'saveReply',
                        payload: { data: replyResponse.data, topic_id: payload.topic_id},
                    });   
                }
            }
        },
            
            
// services          
// 获取评论
export async function get_topic(params) {
    return request('/dev/site/topic', {
        method: 'GET',
        params,
    });
}

// 获取回复
export async function get_reply(params) {
    return request('/dev/site/reply', {
        method: 'GET',
        params,
    });
}

源码分析

dva/ createPromiseMiddleware.js

.umi/plugin-dva/dva.ts