js 异步迭代器

本节目标：理解“js 异步迭代器”的核心思路，并能把它用于实际开发或面试表达。 dongceha

于 2020-05-17 00:12:25 发布

905 收藏 1 分类专栏：前端文章标签： javascript es6 版权

前端专栏收录该内容 77 篇文章1 订阅订阅专栏同步的迭代器模式众所周知，迭代器模式就是在已有的对象里增加一个迭代函数，然后通过迭代函数来执行对应的函数

const obj = { arr1: [1,2,3,4,5], arr2: [1,2,3,4,5], next(fn) { const arr = [...this.arr1, ...this.arr2] for (val of arr) { fn(val) } } } obj.next(console.log) 异步的迭代器模式先讲讲不使用es6 的情况下的做法

// 这里是被异步调用的函数 function promise1(next, value) { setTimeout(() => { console.log(1, value) next(2) }, 100); } function promise2(next, value) { setTimeout(() => { console.log(2, value) next(3) }, 100); } var events = [promise1, promise2] 做法一 function eventLoop(events, initv) { let index = 0; function next(value) { if (index >= events.length) { return value } else { const fn = events[index] fn(next, value) } index ++ } next(initv) } eventLoop(events, 1) 这里是基于约定的方式来进行的，也就是说，你异步执行完成以后，一定要执行传过来的 next 函数，否则进行不下去，是不是很熟悉？

没错了，vue-router 和 koa2 的 use 都是基于这种写法的

做法二这个就是很有名的 redux compose 中的做法了，实际上这个也是基于约定的方式来实现的，不过要注意的是，如果没有那些约定的话，这个不是异步的，这里就不深入讲了，要不然光光这个就可以写一两篇单独的博客了

function compose(...funcs) { if (funcs.length === 0) { return arg => arg } if (funcs.length === 1) { return funcs[0] } // 每个函数的返回值都会被当做一个 return funcs.reduce((a, b) => (...args) => a(b(...args))) } 然后看一个最简单的中间件 redux-thunk

// 整个过程就是柯里化的过程，巧妙地运用了闭包的概念 function createThunkMiddleware(extraArgument) { // 返回的函数其实是一个三重返回的函数 // 第一重是用于 redux 中，收集 dispatch 和 store 的闭包 // const chain = middlewares.map(middleware => middleware(middlewareAPI)) // 第二重就是用来执行上文中的 compose 的，注意这里的 next , // 其实就是传进来的需要执行的下一个函数 // 第三重，就是接受 dispatch('dosomething') 中的 dosomething 这个参数的 return ({ dispatch, getState }) => (next) => (action) => { if (typeof action === 'function') { return action(dispatch, getState, extraArgument); } return next(action); }; } const thunk = createThunkMiddleware(); thunk.withExtraArgument = createThunkMiddleware; export default thunk; 其实都是将接下来的代码的执行权利和时机交给上一个函数判断

那使用了 es6 之后，又会有怎样的精彩呢？

// 注意，这里的函数的返回值都是一个 Promise function promise1(value) { return new Promise(resolve => { setTimeout(() => { console.log(1, value) resolve(1) }, 100); }) } function promise2(value) { return new Promise(resolve => { setTimeout(() => { console.log(2, value) resolve(2) }, 100); }) } var events = [promise1, promise2] 做法一既然都说了迭代器了，那当然得出来 es6 之中的 generator 了

function * generatorf(events, val) { for (fn of events) { val = yield fn(val) } } let g = generatorf(events, 1); function cnext(result) { if (result.done) return; result.value.then((val) => { cnext(g.next(val)) }) } cnext(g.next()) 可以看到，这里相比于之前，执行 next 的权利被进行了转移，到了一个专门的函数里面了，当然，如果想要在代码里面获得 next 的控制权，也可以避免使用 cnext，而是直接在每一个 Promise 的异步函数之中，手动的去调用 g.next()

而使用的场景，类似于我司的用户校验，是否已经注册了？注册的信息是否完善？是否是 18岁以上？等等

这样的话，每一个都有额外的判断和流程图要走，自然是将控制权放在代码里更方便

做法二关于 generator 之上，还要 es7 中的 async 和 await 来进行进一步的封装，这样的话，就简单地只需要几行代码就够了，但是这样的话，就获得不到函数的 next 控制权了，只能交给函数一步一步去执行

async function generatorf(events, val) { for (fn of events) { val = await fn(val) } } generatorf(events, 1); 做法三做法3其实使用到了 Symbol 关键字

凭什么异步调用还和这东西扯上关系了？看一下阮一峰老师的 es6

没错了，看到这里有没有心头一颤？和之前的 generator 很像，但是完全去除了 generator 的辅助

let g = eventsSymbol.iterator; function cnext(result) { if (result.done) return; result.value(1).then((val) => { cnext(g.next(val)) }) } cnext(g.next()) 当然，因为这里的数据都被包在了数组里，所以看不出来，但是如果需要执行的异步函数被写在了一个配置 JSON 里面呢？

例如：

const events = { steps1: { fn: promise1 }, steps2: { fn: promise2 }, Symbol.iterator { const entries = Object.entries(this); let index = 0; return { next() { if (index < entries.length) { const value = entries[index][1].fn index ++ return { value, done: false }; } else { return { value: undefined, done: true }; } } }; } } async function gen (events, val) { for (const iterator of events) { val = await iterator(val) } } gen(events, 1) 这样就完成了对于配置项的异步迭代

当然，如果你想要在函数里面获得对应的操作的权利，那么就应该换一种写法了 const events = { steps1: { fn: promise1 }, steps2: { fn: promise2 } } function * gen (events, val) { for (const iterator in events) { console.log(iterator) val = yield events[iterator].fn(val) // val = await iterator(val) } } var g = gen(events, 1) 然后异步执行的函数应该这样写，就好像上面不适用 es6 的时候一样，需要手动去执行是否next

// 注意，这里的函数的都需要去执行一个 g.next 来决定是否继续往下走 function promise1(value) { setTimeout(() => { console.log(1, value) if (true) g.next() else // 做其他的操作 }, 100); } function promise2(value) { setTimeout(() => { console.log(1, value) if (true) g.next() else // 做其他的操作 }, 100)

js 异步迭代器 ​

js 异步迭代器