JS异步编程之generator与async/await语法糖详解

// like sync mode

try{
  const value1 = ajax('/api/url1')
  console.log(value1)
  const value2 = ajax('/api/url1')
  console.log(value2)
  const value3 = ajax('/api/url1')
  console.log(value3)
  const value4 = ajax('/api/url1')
  console.log(value4)
  const value5 = ajax('/api/url1')
  console.log(value5)
}catch(err){
  console.log(err)
}

function * foo () {
  console.log('start')
    yield 'foo'
}

​​​​​​​const generator = foo()

const result = generator.next()

function * foo () {
  console.log('start')
    // 我可以在这里接收next传入的参数
    const res = yield 'foo'
  console.log(res) // 这是我传入的参数
}

const generator = foo()

const result = generator.next('这是我传入的参数')
console.log(result) // { value: 'foo', done: false }

function * foo () {
  console.log('start')
  // 我可以在这里接收next传入的参数
  try {
    const res = yield 'foo'
    console.log(res) // 这是我传入的参数
  } catch (err) {
    console.log(err.message) // 抛出错误
  }
}

const generator = foo()

const result = generator.next('这是我传入的参数')
console.log(result)

generator.throw(new Error('抛出错误'))

function ajax(url) {
  return new Promise((resove, reject) => {
    var xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    // 新方法可以直接接受一个j对象
    xhr.responseType = 'JSON'
    xhr.onload = function () {
      if (this.status === 200) {
        resove(this.response)
      } else {
        reject(new Error(this.statusText))
      }
    }
    xhr.send()
  })
}

function* main() {
  const user1 = yield ajax('/json1.json')
  console.log(user1)

  const user2 = yield ajax('/json2.json')
  console.log(user2)

  const user3 = yield ajax('/json3.json')
  console.log(user3)
}

const g = main()
const result = g.next()

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

  if (result2.done) return
  result2.value.then(data2 => {
    const result3 = g.next(data2)

    if (result3.done) return
    result3.value.then(data3 => {
      g.next(data3)
    })
  })
})

const g = main()

function handleResult(result) {
  if (result.done) return
  result.value.then(data => {
    handleResult(g.next(data))
  }, err => {
    g.throw(err)
  })
}

handleResult(g.next())

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

  function handleResult(result) {
    if (result.done) return
    result.value.then(data => {
      handleResult(g.next(data))
    }, err => {
      g.throw(err)
    })
  }

  handleResult(g.next())
}


co(main)

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

    const user2 = await ajax('/json2.json')
    console.log(user2)

    const user3 = await ajax('/json3.json')
    console.log(user3)
  } catch (error) {
    console.log(error)
  }
}

main()

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