Detailed explanation of JS asynchronous programming generator and async/await syntax sugar

Generator asynchronous solution

Compared with the traditional callback function to handle asynchronous calls, the biggest advantage of Promise is that it can chain calls to solve the problem of callback nesting. However, there will still be a large number of callback functions written in this way. Although they are not nested, they still do not reach the readability of traditional synchronous code. If you write asynchronous code in the following way, it is very concise and easier to read.

// like sync mode

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

In ES2015, Generator Function is provided. The syntax difference between it and ordinary functions is that after the function statement and before the function name, there is a "*" as the identifier of the generator function.

When we call the generator function, it will not execute the function immediately, but will get a generator object. Until we manually call the next method of the object, the function body will start to execute. We can use the keyword yield to return a value outside, and we can get this value from the return value of the next method. In addition, there is a done keyword in the returned attribute to indicate whether the generator has completed execution.

Yield will not end the execution of the function like a return, but will only pause the execution of the function until the next method is called next.

function * foo () {
  ('start')
    yield 'foo'
}

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

const result = ()

If the parameter is passed when calling the next method, the passed parameter will be used as the return value of the yield keyword.

function * foo () {
  ('start')
    // I can receive the parameters passed in next here    const res = yield 'foo'
  (res) // This is the parameter I passed in}

const generator = foo()

const result = ('This is the parameter I passed in')
(result) // { value: 'foo', done: false }

If we call the throw method of the generator function, this method will throw an exception inside the generator function

function * foo () {
  ('start')
  // I can receive the parameters passed in next here  try {
    const res = yield 'foo'
    (res) // This is the parameter I passed in  } catch (err) {
    () // Throw an error  }
}

const generator = foo()

const result = ('This is the parameter I passed in')
(result)

(new Error('Top an error'))

Using generator functions and promises to achieve the experience of asynchronous programming

function ajax(url) {
  return new Promise((resove, reject) => {
    var xhr = new XMLHttpRequest()
    ('GET', url)
    // The new method can directly accept a j object     = 'json'
     = function () {
      if ( === 200) {
        resove()
      } else {
        reject(new Error())
      }
    }
    ()
  })
}

function* main() {
  const user1 = yield ajax('/')
  (user1)

  const user2 = yield ajax('/')
  (user2)

  const user3 = yield ajax('/')
  (user3)
}

const g = main()
const result = ()

(data => {
  const result2 = (data)

  if () return
  (data2 => {
    const result3 = (data2)

    if () return
    (data3 => {
      (data3)
    })
  })
})

It is obvious that the generator's executor can be called recursively

const g = main()

function handleResult(result) {
  if () return
  (data => {
    handleResult((data))
  }, err => {
    (err)
  })
}

handleResult(())

The calls to generator functions are actually similar, so we can write a more general executor

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

  function handleResult(result) {
    if () return
    (data => {
      handleResult((data))
    }, err => {
      (err)
    })
  }

  handleResult(())
}


co(main)

Of course, there is already a relatively complete library for such executors in the community. This co-scheme was particularly popular before 2015. Later, after the release of async/await syntax sugar, this scheme was relatively less popular. The most obvious change in using generator method is that asynchronous calls are regressed to flattening

async/await

With Generator, js asynchronous programming basically has a similar experience as synchronous code, but using an asynchronous solution like generator also requires you to manually write an executor function, which will be more troublesome. A new function called async has been added to the ES2017 version, which also provides this flat programming experience and is a standard asynchronous programming syntax at the language level. In fact, the async function is a more convenient syntax sugar for generator functions, so syntax is similar to generator functions.

async function main() {
  try {
    const user1 = await ajax('/')
    (user1)

    const user2 = await ajax('/')
    (user2)

    const user3 = await ajax('/')
    (user3)
  } catch (error) {
    (error)
  }
}

main()

The async function returns a Promise object, which is more conducive to overall code control

(() => {
  ('all completed')
}).catch(err => {
  (err)
})

This is the end of this article about the detailed explanation of generator and async/await syntax sugar in JS asynchronous programming. For more related JS generator async/await content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!