js generator妙用

/**
 * generator的精华在于next的参数,这样的能力才让generetor成为了一种强悍的流程能力
 */

function mypromise() {
  return Promise.resolve({x: 1})
}


function* mygen() {
  var data = yield mypromise()
  console.log(data)
  return data
}


var x = mygen()

var y = x.next()

// 利用next(data)的特性可以将generetor中的promise展开,直接更改yeild执行上下文的返回变量值
// 这个技巧被用在mobx-state-tree中的flow上
y.value.then(data => {
  x.next(data)
})


// 实现一个flow
function flow(gen, args) {
  let _gen = gen(args);

  function _next(h) {
    if (h.done) {
      console.log('flow end!!')
      return h.value;
    }
    if (h.value instanceof Promise) {
      h.value.then(res  => {
        _next(_gen.next(res))
      })
    } else {
      _next(_gen.next(h.value))
    }
  }

  return _next(_gen.next())
}

function* chains(){
  var data1 = yield Promise.resolve({x: "flow1"})

  console.log('data1: ', data1)

  var x = data1.x;

  console.log('x: ', x)

  var data2 = yield x + " ==> flow2";

  console.log('data2: ', data2)

  return data2
}


// 执行这个flow, 有意思的事情来了
flow(chains)
posted @ 2021-06-30 18:30  ViCanary  阅读(118)  评论(0编辑  收藏  举报