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)
})

能夠參考個人博文章內容