Generator异步方案与async函数

79 阅读1分钟

Generator 异步方案(生成器函数->Es2015提供)

  // 生成器函数回顾
     function * () {
        console.log('start')
        
        try {
           const res = yield 'foo'
           console.log(res)
        } catch (e) {
           console.log(e)
        }
     }
     const generator = foo()
     
     const result = generator.next()
     console.log(result)
    
     // generator.next('bar')

     generator.throw(new Error('Generator error'))

体验Generator函数异步方案(配合 Promise 的异步方案)

  function * main () {
     try{
        const users = yield ajax('/api/users.json')
        console.log(users)

        const posts = yield ajax('/api/posts.json')
        console.log(posts)

        const users1= yield ajax('/api/users1.json')
        console.log(users1)
     }  catch(e) {
        console.log(e)
     }
  }

  const g = main()

// 递归

 function handleResult (result) {
     if(result.done) return // 生成器函数结束
     result.value.then(data => {
        handleResult(g.next(data))
     },  error => {
        g.throw(error)
     })
  }

  handleResult(g.next())

  const result = g.next()

  result.value.then(data => {
     const result2 = g.next(data)

     if(result2.done) return

     result2.value.then(data => {
          const result3 = g.next(data)

          if(result3.done) return

          result3.value.then(data => {
              g.next(data)
          })
     })
  })

// 封装(简化生成器函数)(Async/Await没出来之前)

  function co (generator) {
  const g = main()

  function handleResult (result) {
     if(result.done) return // 生成器函数结束
     result.value.then(data => {
        handleResult(g.next(data))
     },  error => {
        g.throw(error)
     })
  }

  handleResult(g.next())
}

co(main)

Async/Await语法糖(语言层面的异步编程标准)

async function main () {
     try{
        const users = await ajax('/api/users.json')
        console.log(users)

        const posts = await ajax('/api/posts.json')
        console.log(posts)

        const users1= await ajax('/api/users1.json')
        console.log(users1)
     }  catch(e) {
        console.log(e)
     }
  }

  const promise = main()  

  promise.then(() => {
     console.log('all completed')
  })

// 纯代码,后面会出一篇generator异步详解