利用ES6 的generators 化异步为同步

最新推荐文章于 2023-08-12 19:57:09 发布

十方魔

最新推荐文章于 2023-08-12 19:57:09 发布

阅读量661

点赞数

分类专栏：前端/Javascript 文章标签： es6 generator async 异步函数变同步 nodejs

本文链接：https://blog.youkuaiyun.com/github_36487770/article/details/79073888

版权

前端/Javascript 专栏收录该内容

45 篇文章

订阅专栏

本文介绍如何利用JavaScript中的Generator特性来简化异步操作流程，通过示例代码展示了如何使用Generator将异步任务转化为同步执行的方式，使得代码更加清晰易读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

generator可以将异步转化为同步，让JS中讨厌的回调清晰起来。

如下例：

var fs = require('fs')

function run(generator){

  console.log('now in run')

  var it = generator(go)

  console.log(`now get it : ${it}`)

  function go(err,result){
    console.log(`now in go, err is 
      ${err},result is 
      ${result}`)

    var next = it.next(result)

    console.log(`now after it.next and its value and done : ${next.value},${next.done}`)
  }

  go()

  console.log(`end of function run`)

}

run(function* (done){

  console.log(`before var exercises`)

  var exercises = yield fs.readFile('gulp.js',done)

  console.log(`exercises is ${exercises}`)

})

在console台的结果是这样：

now in run
now get it : [object Generator]
now in go, err is 
      undefined,result is 
      undefined
before var exercises
now after it.next and its value and done : undefined,false
end of function run
now in go, err is 
      null,result is 
      var gulp= require('gulp');
var htmlmin=require('html-minifier');

gulp.task('minifyhtml',function(){

    gulp.src('myjq.html')
    .pipe(htmlmin({collapseWhitespace:true}))
    .pipe(gulo.dest('./dist'))
})
exercises is var gulp= require('gulp');
var htmlmin=require('html-minifier');

gulp.task('minifyhtml',function(){

    gulp.src('myjq.html')
    .pipe(htmlmin({collapseWhitespace:true}))
    .pipe(gulo.dest('./dist'))
})
now after it.next and its value and done : undefined,true

关键就在这个run函数，执行流程是这样的：

新建一个generator-iterator对象（it）
定义go函数，在go函数中调用了it.next
将go函数传给了genterator-iterator对象作为回调
不带参数地运行go函数一次，来初始化generator

go函数总共被执行了两次，一次不带参数，第二次拿到了yield fs的结果再做下面的事情。

还可以把fs.readFile包装成另一个函数，再看

function run(taskdef){

  let task = taskdef()

  let next = task.next()

  console.log(`刚进run函数 next,${next.value}`)

  function step(){

    console.log('in step')

    if(!next.done){

      if(typeof next.value === 'function'){

        console.log(`type func`,next.value)

        next.value( function(err,data){

          if(err){

            console.error('err happend', err)

            task.throw(err)

            return
          }

          console.log('data happed',data)

          next = task.next(data)

          console.log(`next= task.next(data),${next.value},${next.done}`)

          step()


        })
      }

      else{ // else 部分始终没有执行到

        console.log(`now value not func, ${next.value}`)

        next = task.next(  next.value )

        console.log(`in else module , nextvalue = ${next.value}`)

        step()

      }
    }

  }


  step()

}

let fs = require('fs')

function readFile(filename){

  return function(callback){

    fs.readFile(filename,callback)
  }

}

run(function* (){

  let contents = yield readFile('gulp.js')

  console.log(`contents happed ,${contents}`)

  console.log('done')
})

console台的结果是：

刚进run函数 next,function (callback){

    fs.readFile(filename,callback)
  }
in step
type func function (callback){

    fs.readFile(filename,callback)
  }
data happed <Buffer 76 61 72 20 67 75 6c 70 3d 20 72 65 71 75 69 72 65 28 27 67 75 6c 70 27 29 3b 0a 76 61 72 20 68 74 6d 6c 6d 69 6e 3d 72 65 71 75 69 72 65 28 27 68 74 ... >
contents happed ,var gulp= require('gulp');
var htmlmin=require('html-minifier');

gulp.task('minifyhtml',function(){

    gulp.src('myjq.html')
    .pipe(htmlmin({collapseWhitespace:true}))
    .pipe(gulo.dest('./dist'))
})
done
next= task.next(data),undefined,true
in step