This is the 7th day of my participation in the August Text Challenge.More challenges in August

preface

When it comes to asynchronous programming methods, there are probably three familiar solutions: callback functions, Promise (ES6), and async/await (ES7). ES6 has a Generator in addition to making promises.

Generator is an asynchronous programming solution provided by ES6 that has a completely different syntactic behavior from traditional functions. A traditional function, once started, runs to the end or ends when it encounters a return, without interruption or external input. Generator functions think outside the box, making it possible for the function to run completely.

This article mainly refines the syntax of Generator functions in chapter 16 of INTRODUCTION to ES6 standard.

Characteristics of the

Formally, a Generator function is an ordinary function with two characteristics.

  1. functionAnd the function name*.
  2. Function body availableyieldStatements define different internal states.

Basic use:

function* generator() {
  yield 'hello'
  yield 'world'
  return 'hello world'
}

let iterator = generator()
iterator.next() // {value: "hello", done: false}
iterator.next() // {value: "world", done: false}
iterator.next() // {value: "hello world", done: true}
iterator.next() // {value: undefined, done: true}
Copy the code

Calling the Generator function returns an iterator representing an internal pointer to the Generator function. Each call to the next method of the Iterator returns an object with value representing the current internal state value and done indicating whether the traversal is complete.

Yield expression

Yield is the pause flag for a Generator function.

Yield is used only in Generator functions and yields an error when used elsewhere.

(function (){
  yield 1; }) ()// SyntaxError: Unexpected number
Copy the code

The yield expression must be enclosed in parentheses if it is used in another expression.

function* demo() {
  console.log('Hello' + yield); // SyntaxError
  console.log('Hello' + yield 123); // SyntaxError

  console.log('Hello' + (yield)); // OK
  console.log('Hello' + (yield 123)); // OK
}
Copy the code

Yield expressions are used as arguments or to the right of assignment expressions, without parentheses.

function* demo() {
 foo(yield 'a'.yield 'b'); // OK
 let input = yield; // OK
}
Copy the code

Yield expression *

By default, calling another Generator function from a Generator function has no effect.

function* foo() {
  yield 'a'
  yield 'b'
}

function* bar() {
  foo()
  yield 'c'
  yield 'd'
}

let iterator = bar()

for(let value of iterator) {
  console.log(value)
}
// c
// d
Copy the code

This is where the yield* comes in handy.

function* foo() {
  yield 'a'
  yield 'b'
}

function* bar() {
  yield* foo()
  yield 'c'
  yield 'd'
}

let iterator = bar()

for(let value of iterator) {
  console.log(value)
}
// a
// b
// c
// d
Copy the code

application

function* loadUI() {
  showLoading()
  yield loadData()
  hideLoading()
}
let loader = loadUI()
/ / load the UI
loader.next()

/ / uninstall the UI
loader.next()
Copy the code