javascript 迭代器案例逐步认识

es6 generate 是什么东西？

迭代器 ： 是一种协议，每一次迭代的值都跟上一次迭代的不一样，总会有一个next 总能拿到一个对象
生成器：生成一个可以返回迭代器的函数，本质上还是操作迭代器，更加方便的使用迭代器，每次返回的都是promise。

一： 认识什么是generate

function* gen(){
  yield 1
  yield* add()
  yield x   // 传递参数
  return 4

}

function* add(){
   yield 11
   yield 12
}

const g = gen()
log( g.next() )  // {done:false,value;1}
log( g.next() )  // {done:false,value;11}
log( g.next() ) // {done:false,value;12}
log( g.next(3) ) // {done:false,value;3}  // 注意这里
log( g.next() ) // {done:false,value;4}
log( g.next() ) // {done:true,value;undefined}

2：

// log 打印函数
const log = s => console.log.call(this,s)
// sleep 睡眠函数
const sleep = (cb,t) => setTimeout( cb.bind(this) ,t)

function* request(resume){
  yield  sleep( ()=>{ console.log(1)} ,1000)
  yield  sleep( ()=>{ console.log(2)} ,2000)
  yield  sleep( ()=>{ console.log(3)} ,3000)
}

var g = request()
g.next() //  1
g.next() //  2
g.next() //  3

3: 改进版本，实现自执行

// 迭代器自执行函数
function run(generatorFunction) {
   var generatorItr = generatorFunction(resume)
   function resume(callbackValue) {
      generatorItr.next(callbackValue);
   }
   generatorItr.next()
}

function* request(resume){
  let a = yield  sleep( ()=>{

    console.log(1)
    resume()

  } ,1000)


  yield  sleep( ()=>{
     console.log(2)
     resume()
  } ,2000)

  yield  sleep( ()=>{ console.log(3) } ,3000)
}

run(request)  // 依次执行 1，2，3

4： ajax 异步自执行

const urls = ['url1','url2','url3']
const req = (cb,url) => setTimeout( cb.bind(this,url) ,1000)


function* request(arr){
   for(let i=0; i<arr.length; i++){
      yield getQ(arr[i])
   }
}


function getQ(url){
   var p = new Promise((resolve,reject)=>{
      req((u)=>{
         if(u){
            resolve(u)
         }else{
            reject(u)
         }
      },url)
  })

  p.then((r)=>{
     g.next()
  })
}


// 可以借助上面run函数执行，这里就直接执行
var g = request(urls)
g.next()  // 依次执行结果是： url1  url2  url3

5： 终极解决放啊 在node，我们一般使用 TJ 大神的 co库来解决这个run 函数调用的问题：

co(function* (){
  var result = yield Promise.resolve(true)
  return result
}) .then((v)=>{
  log(v)
})

可以参考我的博文章内容