八、深入学习迭代器iterator和生成器Generator及async/await语法

1、迭代器iterator

1.1.什么是迭代器？

• 迭代器（iterator），使用户在容器对象（container，例如链表或数组）上遍访的对象，使用该接口无需关心对象的内部实现细节。
  • 其行为像数据库中的光标，迭代器最早出现在1974年设计的CLU编程语言中；
  • 在各种编程语言的实现中，迭代器的实现方式各不相同，但是基本都有迭代器，比如Java、Python等；
• 从迭代器的定义我们可以看出来，迭代器是帮助我们对某个数据结构进行遍历的对象。
• 在JavaScript中，迭代器也是一个具体的对象，这个对象需要符合迭代器协议（iterator protocol）：
  • 迭代器协议定义了产生一系列值（无论是有限还是无限个）的标准方式；
  • 在JavaScript中这个标准就是一个特定的next方法；
• next方法有如下的要求：
  • next方法是一个无参数或者一个参数的函数，返回一个应当拥有以下两个属性的对象：
  • done（boolean）
    • 如果迭代器可以产生序列中的下一个值，则为 false。（这等价于没有指定 done 这个属性。）
    • 如果迭代器已将序列迭代完毕，则为 true。这种情况下，value 是可选的，如果它依然存在，即为迭代结束之后的默认返回值。
  • value
    • 迭代器返回的任何 JavaScript 值。done 为 true 时可省略。

1.2.迭代器的代码练习

• 通过上面对JavaScript迭代器的定义，我们可以自己实现一个迭代器如下：

const arr = ['nba', 'cba', 'ncaa']

// 定义一个迭代器
let index = 0
const iterator = {
  next() {
    if (index < arr.length) {
      return { done: false, value: arr[index++] }
    }else {
      return { done: true}
    }
  }
}

console.log(iterator.next())//{ done: false, value: 'nba' }
console.log(iterator.next())//{ done: false, value: 'cba' }
console.log(iterator.next())//{ done: false, value: 'ncaa' }
console.log(iterator.next())//{ done: true，value: undefined }

• 我们发现上面代码只可以给固定的某个数组添加迭代器；如果想给别的数组添加迭代器，又要重新赋值一份相同的代码，比较麻烦；那么接下来我们封装一个函数，来给传进来的数组添加迭代器吧

const names = ['nba', 'cba', 'ncaa']
const friends = ['kobe','james','curry']
// 封装：传入一个数组，给数组加上对应的迭代器（迭代器对象）
//-> 注意： 调用该函数createArrayIterator(arr)返回： arr对应的迭代器对象；一定要有一个变量去接收这个迭代器；不然，该函数在调用时返回的迭代器对象，由于没有引用指向它（迭代器），即该函数调用执行完之后，返回的迭代器会被垃圾回收器进行回收（标记清除）；
//如果没有变量接收这个迭代器：你直接拿这个迭代器分别调用next多次，你会发现它每次调用的返回值都是跟第一次调用拿到的返回值是一样的；（因为你每次拿到的这个迭代器都是新创建的迭代器）
function createArrayIterator(arr) {
  let index = 0
  return {
    next() {
      if (index < arr.length) {
        return { done: false, value: arr[index++] }
      } else {
        return { done: true, value: undefined }
      }
    }
  }
}
//1.没有变量接收迭代器的情况
console.log(createArrayIterator(names).next())//{ done: false, value: 'nba' }
console.log(createArrayIterator(names).next())//{ done: false, value: 'nba' }
console.log(createArrayIterator(names).next())//{ done: false, value: 'nba' }
console.log('----------')

//2.有变量接收迭代器的情况
const arrIterator = createArrayIterator(names)
console.log(arrIterator.next())//{ done: false, value: 'nba' }
console.log(arrIterator.next())//{ done: false, value: 'cba' }
console.log(arrIterator.next())//{ done: false, value: 'ncaa' }
console.log(arrIterator.next())//{ done: true, value: undefined }

const friendsIterator = createArrayIterator(friends)
console.log(friendsIterator.next())//{ done: false, value: 'kobe' }
console.log(friendsIterator.next())//{ done: false, value: 'james' }
console.log(friendsIterator.next())//{ done: false, value: 'curry' }
console.log(friendsIterator.next())//{ done: true, value: undefined }

1.3.可迭代对象是什么

• 但是上面的代码整体来说看起来是有点奇怪的：
  • 我们获取一个数组的时候，需要自己创建一个index变量，再创建一个所谓的迭代器对象；
  • 事实上我们可以对上面的代码进行进一步的封装，让其变成一个可迭代对象；
• 什么又是可迭代对象呢？
  • 它和迭代器是不同的概念；
  • 当一个对象实现了iterable protocol协议时，它就是一个可迭代对象；
  • 这个对象的要求是必须实现 @@iterator 方法，在代码中我们使用 Symbol.iterator 访问该属性；

const names = ['nba', 'cba', 'ncaa']
//数组是 可迭代对象；所以内部实现 @@iterator方法，在代码中我们使用 Symbol.iterator 访问该属性
console.log(names[Symbol.iterator])//[Function: values]
console.log(names[Symbol.iterator]())//Object [Array Iterator] {} -> 迭代器（迭代器对象)
 
const iterator = names[Symbol.iterator]() //拿到迭代器
console.log(iterator.next())//{ value: 'nba', done: false }
console.log(iterator.next())//{ value: 'cba', done: false }
console.log(iterator.next())//{ value: 'ncaa', done: false }
console.log(iterator.next())//{ value: undefined, done: true }

• 当然我们要问一个问题，我们转成这样的一个东西有什么好处呢？
  • 当一个对象变成一个可迭代对象的时候，就可以进行某些迭代操作；
  • 比如 for...of 操作时，其实就会调用它的 @@iterator 方法；然后拿到迭代器，再不停的调用迭代器的next方法，直到next方法返回的对象的done属性值为true；就会停止调用next方法（即迭代结束）

1.4.可迭代对象的代码

• 如对象默认是一个不可迭代对象，那我们怎么让他变成一个可迭代对象呢？给对象内部实现一个 @@iterator 方法即可；如下：

const info = {//为了让info变成可迭代对象； 所以在该对象内部实现了[Symbol.iterator]方法
  name:'kobe',
  age:39,
  height:1.98,
  [Symbol.iterator]() {
    const entries = Object.entries(this)
    let index = 0
    return { //返回一个迭代器（迭代器对象）
      next() {
        if(index < entries.length) {
          return {value:entries[index++],done:false}
        }else {
          return {value:undefined,done:true}
        }
      }
    }
  }
}
//上面给info对象内部实现了@@iterator方法（即[Symbol.iterator]方法）
//所以info变成了一个可迭代对象，即可以用for of进行遍历了
for(const [key,value] of info) {
  console.log(key,value)
}

• 迭代器跟可迭代对象的区分：

1.5.原生迭代器对象

• 事实上我们平时创建的很多原生对象已经实现了可迭代协议，会生成一个迭代器对象的：
  • String、Array、Map、Set、arguments对象、NodeList集合；

//Set数据结构创建的实例是一个可迭代对象
const set = new Set(['nba','cba','ncaa','bba'])

//即可以获取可迭代函数
console.log(set[Symbol.iterator])

//调用可迭代函数，获取迭代器
const iterator = set[Symbol.iterator]()
console.log(iterator.next())//{ value: 'nba', done: false }
console.log(iterator.next())//{ value: 'cba', done: false }
console.log(iterator.next())//{ value: 'ncaa', done: false }
console.log(iterator.next())//{ value: 'bba', done: false }
console.log(iterator.next())//{ value: undefined, done: true }

• 即：这些类（String、Array、Map、Set）创建的实例对象都是可迭代对象；还有arguments对象、NodeList集合也是可迭代对象

//字符串
const str = 'Hello'
for (const item of str) {
  console.log(item)
}

//数组
const arr = ['aaa', 'bbb', 'ccc']
for (const item of arr) {
  console.log(item)
}

//arguments
function foo() {
  for (const item of arguments) {
    console.log(item)
  }
}
foo('kobe', 'james', 'curry')

//set
const set = new Set()
set.add('nba')
set.add('cba')
for(const item of set) {
  console.log(item)
}

//等...

1.6.可迭代对象的应用

• 那么这些可迭代对象可以被用在哪里呢？
  • JavaScript中语法：for ...of、展开语法...（spread syntax）、yield*（后面学）、解构赋值（Destructuring_assignment）；
  • 创建一些对象时：new Map([Iterable])、new WeakMap([iterable])、new Set([iterable])、new WeakSet([iterable]);
  • 一些方法的调用：Promise.all(iterable)、Promise.race(iterable)、Array.from(iterable);

const arr = ['nba','cba','ncaa']
//1.for...of
for(const item of arr) {
  console.log(item)
}

//2.展开运算符... 
const arr1 = [...arr,'curry']

//3.解构赋值
const [name1,name2,name3] = arr


//4.创建其他结构
const set = new Set(arr)
console.log(Array.from(set))

//5.调用方法
const p1 = new Promise((resolve,reject) => {
  resolve('p1 info')
})
const p2 = new Promise((resolve,reject) => {
  resolve('p2 info')
  // reject('message error')
})

const set1 = new Set()
set1.add(p1)
set1.add(p2)
console.log(set1)
Promise.all(set1).then(res => {//这里的all方法里面的参数，需要传入的是一个可迭代对象参数
  console.log(res)
}).catch(err => {
  console.log(err)
})

1.7.自定义类的迭代 - 实现

• 在前面我们看到Array、Set、String、Map等类创建出来的对象都是可迭代对象：

  • 在面向对象开发中，我们可以通过class定义一个自己的类，这个类可以创建很多的对象：
  • 如果我们也希望自己的类创建出来的对象默认是可迭代的，那么在设计类的时候我们就可以添加上 @@iterator 方法；

• 案例：创建一个classroom的类

  • 教室中有自己的位置、名称、当前教室的学生；
  • 这个教室可以进来新学生（push）；
  • 创建的教室对象是可迭代对象；

• 下面我们就将上面案例实现一下吧；自定义类的迭代实现 ：

class Classroom {
  constructor(name,address,initialStudent) {
    this.name = name,
    this.address = address,
    this.initialStudent = initialStudent
  }

  pushStudent(...arr) {
    // this.initialStudent = this.initialStudent.concat(arr)
    this.initialStudent.push(...arr)
  }

  [Symbol.iterator]() {//直接在父类原型上实现@@iterator(迭代器)方法,这样创建出来的实例对象，都可以通过原型链访问到该方法，即通过该类创建出来的对象都是可迭代对象
    const entries = Object.entries(this)
    let index = 0
    return {
      next() {
        if(index < entries.length) {
          return {value:entries[index++],done:false}
        }else {
          return {value:undefined,done:true}
        }
      }
    }
  }
}

const room1 = new Classroom('2201','3幢',['张三','李四','王二','麻子','王五'])
room1.pushStudent('小二','老王','老李','小明','小花')
console.log(room1)
for(const item of room1) {
  console.log(item)
}



const room2 = new Classroom('3201','6幢',['rose','curry','james','kobe','tatumu'])
console.log(room2)
for(const [key,value] of room2) {
  console.log(key,value)
}

console.log(Classroom.prototype[Symbol.iterator])//[Function: [Symbol.iterator]] ->  迭代器函数

1.8.迭代器的中断

• 迭代器在某些情况下会在没有完全迭代的情况下中断：
  • 比如遍历的过程中通过break、return、throw中断了循环操作；
  • 比如在解构的时候，没有解构所有的值；
• 那么这个时候我们想要监听中断的话，可以添加return方法：（如果在迭代(遍历)过程中出现了中断的情况，那么就会去执行迭代器中的return方法）

class Classroom {
  constructor(name,address,initialStudent) {
    this.name = name,
    this.address = address,
    this.initialStudent = initialStudent
  }

  pushStudent(...arr) {
    // this.initialStudent = this.initialStudent.concat(arr)
    this.initialStudent.push(...arr)
  }

  [Symbol.iterator]() {//直接在父类原型上实现@@iterator方法,这样创建出来的实例对象，都可以通过原型链访问到该方法，即通过该类创建出来的对象都是可迭代对象
    const entries = Object.entries(this)
    let index = 0
    return {
      next() {
        if(index < entries.length) {
          return {value:entries[index++],done:false}
        }else {
          return {value:undefined,done:true}
        }
      },
      return() {
        console.log('迭代器提前终止！')
        return {value:undefined,done:true}
      }
    }
  }
}


const room1 = new Classroom('3201','6幢',['rose','curry','james','kobe','tatumu'])
console.log(room1)
for(const [key,value] of room1) {
  if(key === 'address') {
    break
  }
  console.log(key,value)
}

2、生成器Generator

2.1.什么是生成器？

• 生成器是ES6中新增的一种函数控制、使用的方案，它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。
  • 平时我们会编写很多的函数，这些函数终止的条件通常是返回值或者发生了异常。
• 生成器函数也是一个函数，但是和普通的函数有一些区别：
  • 首先，生成器函数需要在function的后面加一个符号：*
  • 其次，生成器函数可以通过yield关键字来控制函数的执行流程：
  • 最后，生成器函数的返回值是一个Generator（生成器 即 特殊的迭代器）：
    • 生成器事实上是一种特殊的迭代器；
    • MDN：Instead, they return a special type of iterator, called a Generator.
• 生成器函数的写法:

//1.有function关键字时，生成器函数有如下两种写法
function* foo() {}
function *bar() {}

//2.在没有function关键字时， 生成器函数的写法
const obj = {
  name:'kobe',
  *running(){ }
}

2.2.生成器函数执行

• 我们发现下面的生成器函数foo的执行体压根没有执行，它只是返回了一个生成器对象。
• 那么我们如何可以让它执行函数中的东西呢？调用next即可；
• 我们之前学习迭代器时，知道迭代器的next是会有返回值的；
• 但是我们很多时候不希望next返回的是一个undefined，这个时候我们可以通过yield来返回结果；

function* foo() {
  console.log('函数开始执行')
  const value1 = 100
  console.log(value1)
  yield value1

  const value2 = 200
  console.log(value2)
  yield value2

  const value3 = 300
  console.log(value3)
  yield value3

  console.log('函数剩余代码执行，并结束执行！')
}

// foo生成器函数执行：但是此时函数内部并不会执行；而是返回一个生成器；
const generator = foo()
console.log(generator)//Object [Generator] {}

// 1.执行到第一个yield，并且暂停
const next1 = generator.next()
console.log(next1)//{ value: 100, done: false }

// 2.执行到第二个yield，并且暂停
const next2 = generator.next()
console.log(next2)//{ value: 200, done: false }

// 3.执行到第三个yield，并且暂停
const next3 = generator.next()
console.log(next3)//{ value: 300, done: false }

// 4.执行剩余的代码
const next4= generator.next()
console.log(next4)//{ value: undefined, done: true }

/** 上面函数执行的打印结果
 * Object [Generator] {}
 * 函数开始执行
 * 100
 * { value: 100, done: false }
 * 200
 * { value: 200, done: false }
 * 300
 * { value: 300, done: false }
 * 函数剩余代码执行，并结束执行！
 * { value: undefined, done: true }
 */

2.3.生成器传递参数 – next函数

• 函数既然可以暂停来分段执行，那么函数应该是可以传递参数的，我们是否可以给每个函数内部执行的分段来传递参数呢？ 答案是可以的；
  • 我们在调用next函数的时候，可以给它传递参数，那么这个参数会作为上一个yield语句的返回值；
  • 注意：也就是说我们是为本次的函数代码块执行提供了一个值；
  • 补充：第一次调用next方法,前面没有yield，也就是说没有上一个yield语句即接收不到next方法传递进来的参数，那么第一次调用next方法的情况，如何给该执行分段进行传值呢；答案是：我们在生成函数中设置一个参数，然后调用生成函数时进行传值（调用生成器函数，函数内部代码不会执行，且返回一个生成器(特殊的迭代器)）

const obj = {
  name:'kobe',
  *running(value) {
    console.log('first',value)
    const newValue = yield '666'
    console.log('two',newValue)
    const newValue1 = yield '999'
    console.log('three', newValue1)
  }
}
//调用生成器函数，生成器函数内部代码不会执行，而是返回一个生成器（特殊的迭代器）
const generator = obj.running('第一次next')

//1.第一次调用next方法
const next1 = generator.next()//first 第一次next
console.log(next1)//{ value: '666', done: false }

//2.第二次调用next方法
const next2 = generator.next('第二次next')//two 第二次next
console.log(next2)//{ value: '999', done: false }

//3.第三次调用next方法
const next3 = generator.next('第三次next')//three 第三次next
console.log(next3)//{ value: undefined, done: true }

2.4.生成器提前结束 – return函数

• 还有一个可以给生成器函数传递参数的方法是通过return函数：

  • 通过return方法 传的值， 是传给生成器调用return方法后 的返回值（这里的返回值是一个对象：{ value: undefined, done: true }；注：如果调用return方法不传值，那value默认值为undefined） 的value属性；

  • return传值后这个生成器函数就会结束，之后调用next不会继续生成值了；

function* foo(value) {
  console.log('first', value)
  const newValue = yield '666' //在这里调用return方法，终止了生成器函数（即下面的代码，即使你调用next方法，也不会再执行了;但是调用next方法会有返回值，只要调用，它的返回值总是：{ value: undefined, done: true }）
  
  console.log('two', newValue)
  const newValue1 = yield '999'
  console.log('three', newValue1)
}

//调用生成器函数，生成器函数内部代码不会执行，而是返回一个生成器（特殊的迭代器）
const generator = foo('第一次next')

//1.第一次调用next方法
const next1 = generator.next()//first 第一次next
console.log(next1)//{ value: '666', done: false }

//2.中途直接调用return方法（并传值的）的情况
const return1 = generator.return('return方法结束了生成器函数!')
console.log(return1)//{ value: 'return方法结束了生成器函数!', done: true }

//3.第二次调用next方法
const next2 = generator.next('第二次next')
console.log(next2)//{ value: undefined, done: true }


//4.第三次调用next方法
const next3 = generator.next('第三次next')
console.log(next3)//{ value: undefined, done: true }

/** 上面代码执行后，打印结果如下：
 * first 第一次next
 * { value: '666', done: false }
 * { value: 'return方法结束了生成器函数!', done: true }
 * { value: undefined, done: true }
 * { value: undefined, done: true }
 */

2.5.生成器抛出异常 – throw函数

• 除了给生成器函数内部传递参数之外，也可以给生成器函数内部抛出异常：
  • 抛出异常后我们可以在生成器函数中捕获异常；
  • 但是在catch语句中不能继续yield新的值了，但是可以在catch语句外使用yield继续中断函数的执行；

function* foo() {
  console.log('函数开始执行~')

  try {
    yield 'kobe'
  } catch (err) {
    console.log('内部捕获异常', err)
  }

  yield 'james'

  console.log('函数剩余代码执行,即函数结束执行~')
}

const generator = foo()

const next1 = generator.next()//函数开始执行~
console.log(next1)//{ value: 'kobe', done: false }

const throw1 = generator.throw('error message')//内部捕获异常 error message
console.log(throw1)//{ value: 'james', done: false }

const next2 = generator.next()//函数剩余代码执行,即函数结束执行~
console.log(next2)//{ value: undefined, done: true }

2.6.生成器替代迭代器

• 我们发现生成器是一种特殊的迭代器，那么在某些情况下我们可以使用生成器来替代迭代器：

const arr1 = ['aaa', 'bbb', 'ccc']
const arr2 = ['kobe', 'james']
// 1.1。之前用迭代器实现了：给传入的数组添加对应的迭代器的 工具函数
function createArrayIterator1(arr) {
  let index = 0
  return {
    next() {
      if (index < arr.length) {
        return { value: arr[index++], done: false }
      } else {
        return { value: undefined, done: true }
      }
    }
  }
}
const iterator1 = createArrayIterator1(arr1)
console.log(iterator1.next())//{ value: 'aaa', done: false }
console.log(iterator1.next())//{ value: 'bbb', done: false }
console.log(iterator1.next())//{ value: 'ccc', done: false }
console.log(iterator1.next())//{ value: undefined, done: true }

//1.2 用生成器（特殊迭代器）替代迭代器实现：给传入的数组添加对应迭代器的 工具函数
function* createArrayIterator2(arr) {
  for (const item of arr) {
    yield item
  }
}
const iterator2 = createArrayIterator2(arr2)
console.log(iterator2.next())//{ value: 'kobe', done: false }
console.log(iterator2.next())//{ value: 'james', done: false }
console.log(iterator2.next())//{ value: undefined, done: true }


//2.用生成器函数实现一个工具函数：遍历从start到end的数字
function* createRangeIterator(start, end) {
  for (let i = start; i <= end; i++) {
    yield i
  }
}

const rangeIterator = createRangeIterator(3,6)
console.log(rangeIterator.next())//{ value: 3, done: false }
console.log(rangeIterator.next())//{ value: 4, done: false }
console.log(rangeIterator.next())//{ value: 5, done: false }
console.log(rangeIterator.next())//{ value: 6, done: false }
console.log(rangeIterator.next())//{ value: undefined, done: true }

• 事实上我们还可以使用yield*来生产一个可迭代对象：
  • 这个时候相当于是一种yield的语法糖，只不过会依次迭代这个可迭代对象，每次迭代其中的一个值；
  • 注意：yield* item 后面的跟着的这个item值：一定要是一个可迭代对象哦

const arr1 = ['kobe', 'james']

//1. yield* 的使用
function* createArrayIterator(arr) {
  //1.1 for of方法
  // for (const item of arr) {
  //   yield item
  // }
  
  // 1.2 yield* 方法；yield*是一种yield的语法糖，只不过会依次迭代这个可迭代对象（此案例这个可迭代对象指：传入的arr），每次迭代 这个可迭代对象 其中的一个值；
  yield* arr //相当于上面for of遍历的写法

  //1.3 yield*的理解：以传入的arr1数组为例：
  // yield* arr 最后会解析成类似如下写法：
  // yield arr[0] //-> yield 'kobe'
  // yield arr[1] //-> yield 'james'
}
const iterator2 = createArrayIterator(arr1)
console.log(iterator2.next())//{ value: 'kobe', done: false }
console.log(iterator2.next())//{ value: 'james', done: false }
console.log(iterator2.next())//{ value: undefined, done: true }

2.7.自定义类迭代 – 生成器实现

• 在之前的自定义类迭代中，我们也可以换成生成器：

class Classroom {
  constructor(name,address,initialStudent) {
    this.name = name,
    this.address = address,
    this.initialStudent = initialStudent
  }

  pushStudent(...arr) {
    // this.initialStudent = this.initialStudent.concat(arr)
    this.initialStudent.push(...arr)
  }

  *[Symbol.iterator]() {//直接在父类原型上实现一个生成器方法（特殊的迭代器方法）,这样创建出来的实例对象，都可以通过原型链访问到该方法，即通过该类创建出来的对象都是可迭代对象
    const entries = Object.entries(this)
    yield* entries //生成器写法
    // let index = 0
    // return {
    //   next() {
    //     if(index < entries.length) {
    //       return {value:entries[index++],done:false}
    //     }else {
    //       return {value:undefined,done:true}
    //     }
    //   }
    // }
  }
}

const room1 = new Classroom('2201','3幢',['张三','李四','王二','麻子','王五'])
room1.pushStudent('小二','老王','老李','小明','小花')
console.log(room1)
for(const item of room1) {
  console.log(item)
}



const room2 = new Classroom('3201','6幢',['rose','curry','james','kobe','tatumu'])
console.log(room2)
for(const [key,value] of room2) {
  console.log(key,value)
}

console.log(Classroom.prototype[Symbol.iterator])//[GeneratorFunction: [Symbol.iterator]] -> 生成器函数

2.8.异步处理方案 (ES5方案和Promise方案)

• 学完了我们前面的Promise、生成器等，我们目前来看一下异步代码的最终处理方案。
• 案例需求：
  • 我们需要向服务器发送网络请求获取数据，一共需要发送三次请求；
  • 第二次的请求url依赖于第一次的结果；
  • 第三次的请求url依赖于第二次的结果；
  • 依次类推；
• 方案一：ES6之前方案

const data = [//模拟发送网络请求拿到的数据
  {//接口为：http://test.org/;可拿到该对象数据
    portProp: 'kobe',
    data: ['aaa', 'bbb', 'ccc']
  },
  {//接口为：http://test.org/kobe/;可拿到该对象数据
    portProp: 'james',
    data: ['ddd', 'eee', 'fff']
  },
  {//接口为：http://test.org/kobe/james/;可拿到该对象数据
    portProp: 'curry',
    data: ['ggg', 'hhh', 'iii']
  }
]
//模拟发送请求的接口相关参数
let urlStr = 'http://test.org/'
let index = 0

//发送网络请求工具函数封装
function requestData(url, successCallback, failureCallback) {
  setTimeout(() => {
    if (url === urlStr) {
      urlStr = urlStr + data[index].portProp + '/'  //该操作是为了模拟网络请求-实现案例

      const res = data[index++]//网络请求拿到的数据
      successCallback(res)//请求成功，回调出请求到的数据
    } else {
      failureCallback('请求数据失败')//请求失败，抛出错误
    }
  }, 2000);
}

//实现案例需求；ES6之前写法：层层嵌套(回调地狱 callback hell)
requestData('http://test.org/', res1 => {//发送第一次网络请求
  console.log('第一次网络请求拿到的数据：',res1)
  requestData(`http://test.org/${res1.portProp}/`, res2 => {//发送第二次网络请求
    console.log('第二次网络请求拿到的数据：',res2)
    requestData(`http://test.org/${res1.portProp1}/${res2.portProp}/`, res3 => {//发送第三次网络请求
      console.log('第三次网络请求拿到的数据：',res3)
    }, err3 => {console.log('第三次网络请求失败了',err3)})
  }, err2 => {console.log('第二次网络请求失败了',err2)})
}, err1 => { console.log('第一次网络请求失败了',err1) })

• 方案二：Promise方案

const data = [//模拟发送网络请求拿到的数据
  {//接口为：http://test.org/;可拿到该对象数据
    portProp: 'kobe',
    data: ['aaa', 'bbb', 'ccc']
  },
  {//接口为：http://test.org/kobe;可拿到该对象数据
    portProp: 'james',
    data: ['ddd', 'eee', 'fff']
  },
  {//接口为：http://test.org/james;可拿到该对象数据
    portProp: 'curry',
    data: ['ggg', 'hhh', 'iii']
  }
]
//模拟发送请求的接口相关参数
let urlStr = 'http://test.org/'
let index = 0
//发送网络请求工具函数封装
function requestData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (url === urlStr) {
        urlStr = urlStr.slice(0, 16) + data[index].portProp //该操作是为了模拟网络请求-实现案例
        const res = data[index++]//网络请求拿到的数据
        resolve(res)//请求成功，回调出请求到的数据
      } else {
        reject('请求数据失败')//请求失败，抛出错误
      }
    }, 2000);
  })
}
//实现案例需求；

//Promise写法方式1：层层嵌套(回调地狱 callback hell)
function getData1() {
  requestData(`http://test.org/`).then(res1 => {//发送第一次网络请求
    console.log('第一次网络请求拿到的数据：', res1)
    requestData(`http://test.org/${res1.portProp}`).then(res2 => {//发送第二次网络请求
      console.log('第二次网络请求拿到的数据：', res2)
      requestData(`http://test.org/${res2.portProp}`).then(res3 => {//发送第三次网络请求
        console.log('第三次网络请求拿到的数据：', res3)
      }).catch(err3 => console.log('第三次网络请求失败了', err3))
    }).catch(err2 => console.log('第二次网络请求失败了', err2))
  }).catch(err1 => console.log('第一次网络请求失败了', err1))
}


//Promise写法方式2.1: 使用Promise进行重构- 发现此方法依然还是回调地狱
function getData2() {
  requestData(`http://test.org/`).then(res1 => {//发送第一次网络请求
    console.log('第一次网络请求拿到的数据：', res1)
    return res1
  }).then(res1 => {
    requestData(`http://test.org/${res1.portProp}`).then(res2 => {//发送第二次网络请求
      console.log('第二次网络请求拿到的数据：', res2)
      return res2
    }).then(res2 => {
      requestData(`http://test.org/${res2.portProp}`).then(res3 => {//发送第三次网络请求
        console.log('第三次网络请求拿到的数据：', res3)
      })
    })
  })
}


//Promise写法方式2.2: 使用Promise进行重构 - (解决回调地狱) 链式调用
//我们根据方式2.1发现，我们如果在then方法中返回的不是请求到的数据，而是一个Promise（我们就可直接链式调用.then拿到相应请求到的数据了）;
//而requestData函数执行后正好返回的是一个Promise；所以我们这里可以返回该函数的执行结果（Promise），即调用发送第二次请求，而这里正好也能拿到第一次请求返回的数据，
//以此类推；就可完美解决回调地狱问题

function getData3() {
  requestData(`http://test.org/`).then(res1 => {//发送第一次网络请求
    console.log('第一次网络请求拿到的数据：', res1)
    return requestData(`http://test.org/${res1.portProp}`)//发送第二次网络请求 -->这里返回的是一个Promise,该Promise内部又resolve执行回调了第二次请求到的新数据，然后链式调用.then方法，then方法里面的回调函数就可以拿到第二次请求到的新数据了
  }).then(res2 => {//该then方法里面的回调函数拿到了第二次请求到的新数据
    console.log('第二次网络请求拿到的数据：', res2)
    return requestData(`http://test.org/${res2.portProp}`)//发送第三次网络请求
  }).then(res3 => {
    console.log('第三次网络请求拿到的数据：', res3)
  })
}

// getData1()
// getData2()
getData3()
//注意：该页代码中，getData1()   getData2()  getData3()  这三个方法只能调用一个，同时调用两个三个，模拟的接口会出现问题

2.9.Generator方案

• 但是上面的代码其实看起来也是阅读性比较差的，有没有办法可以继续来对上面的代码进行优化呢？

const data = [//模拟发送网络请求拿到的数据
  {//接口为：http://test.org/;可拿到该对象数据
    portProp: 'kobe',
    data: ['aaa', 'bbb', 'ccc']
  },
  {//接口为：http://test.org/kobe;可拿到该对象数据
    portProp: 'james',
    data: ['ddd', 'eee', 'fff']
  },
  {//接口为：http://test.org/james;可拿到该对象数据
    portProp: 'curry',
    data: ['ggg', 'hhh', 'iii']
  }
]
//模拟发送请求的接口相关参数
let urlStr = 'http://test.org/'
let index = 0
//发送网络请求工具函数封装
function requestData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (url === urlStr) {
        urlStr = urlStr.slice(0, 16) + data[index].portProp //该操作是为了模拟网络请求-实现案例
        const res = data[index++]//网络请求拿到的数据
        resolve(res)//请求成功，回调出请求到的数据
      } else {
        reject('请求数据失败')//请求失败，抛出错误
      }
    }, 2000);
  })
}
//实现案例需求；

//生成器方案
function* getData() {
  const res1 = yield requestData(`http://test.org/`)//发送第一次网络请求
  console.log(res1)
  const res2 = yield requestData(`http://test.org/${res1.portProp}`)//发送第二次网络请求
  console.log(res2)
  const res3 = yield requestData(`http://test.org/${res2.portProp}`)//发送第三次网络请求
  console.log(res3)
}

//手动执行生成器函数
const generator = getData()  //拿到生成器
generator.next().value.then(res1 => {//执行生成器
  console.log('第一次网络请求拿到的数据：', res1)
  generator.next(res1).value.then(res2 => {
    console.log('第二次网络请求拿到的数据：', res2)
    generator.next(res2).value.then(res3 => {
      console.log('第三次网络请求拿到的数据：', res3)
      console.log(generator.next(res3).value)
    })
  })
})
//我们会发现这么写还是不够完美，如果我们在生成器函数getData内部又加了yield或删了yield;你会发现我们还要去改 执行生成器 里面的代码；那我们可不可以让执行生成器的操作变成自动化执行呢；从而我们就只要关注生成器函数getData里面的代码

2.10.自动执行generator函数

• 目前我们的写法有两个问题：
• 第一，我们不能确定到底需要调用几层的Promise关系；
• 第二，如果还有其他需要这样执行的函数，我们应该如何操作呢？
• 所以，我们可以封装一个工具函数execGenerator自动执行生成器函数：
• 这样我们就只要关心生成器内部的代码了

const data = [//模拟发送网络请求拿到的数据
  {//接口为：http://test.org/;可拿到该对象数据
    portProp: 'kobe',
    data: ['aaa', 'bbb', 'ccc']
  },
  {//接口为：http://test.org/kobe;可拿到该对象数据
    portProp: 'james',
    data: ['ddd', 'eee', 'fff']
  },
  {//接口为：http://test.org/james;可拿到该对象数据
    portProp: 'curry',
    data: ['ggg', 'hhh', 'iii']
  }
  ,
  {//接口为：http://test.org/curry;可拿到该对象数据
    portProp: 'rose',
    data: ['jjj', 'kkk', 'lll']
  }
]
//模拟发送请求的接口相关参数
let urlStr = 'http://test.org/'
let index = 0
//发送网络请求工具函数封装
function requestData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (url === urlStr) {
        urlStr = urlStr.slice(0, 16) + data[index].portProp //该操作是为了模拟网络请求-实现案例
        const res = data[index++]//网络请求拿到的数据
        resolve(res)//请求成功，回调出请求到的数据
      } else {
        reject('请求数据失败')//请求失败，抛出错误
      }
    }, 2000);
  })
}
//实现案例需求；

//生成器方案
function* getData() {
  const res1 = yield requestData(`http://test.org/`)//发送第一次网络请求
  console.log('第一次网络请求拿到的数据：', res1)
  const res2 = yield requestData(`http://test.org/${res1.portProp}`)//发送第二次网络请求
  console.log('第二次网络请求拿到的数据：', res2)
  const res3 = yield requestData(`http://test.org/${res2.portProp}`)//发送第三次网络请求
  console.log('第三次网络请求拿到的数据：', res3)
  const res4 = yield requestData(`http://test.org/${res3.portProp}`)//发送第四次网络请求
  console.log('第四次网络请求拿到的数据：', res4)
}

// 封装自动化执行生成器函数(了解)  -> 递归写法
function execGenFn(genFn) {
  // 1.获取对应函数的generator
  const generator = genFn()
  // 2.定义一个递归函数
  function exec(res) {
    // result -> { done: true/false, value: 值/undefined }
    const result = generator.next(res)
    if (result.done) return
    result.value.then(res => {//必须拿到该请求数据，才进行下一步执行（请求）
      exec(res)
    })
  }
  // 3.执行递归函数
  exec()
}

execGenFn(getData)//这样我们就只要关心getData生成器内部的代码了


//手动执行生成器函数
// const generator = getData()  //拿到生成器
// generator.next().value.then(res1 => {//执行生成器
//   console.log('第一次网络请求拿到的数据：', res1)
//   generator.next(res1).value.then(res2 => {
//     console.log('第二次网络请求拿到的数据：', res2)
//     generator.next(res2).value.then(res3 => {
//       console.log('第三次网络请求拿到的数据：', res3)
//       generator.next(res3).value.then(res4 => {
//         console.log('第四次网络请求拿到的数据：', res4)
//         console.log(generator.next(res4).value)
//       })

//     })
//   })
// })

2.11.async/await的解决方案（由自动化执行生成器函数引出）

• 其实我们发现只要把生成器函数的*改成async；yield改成await即可 （不需要实现什么自动化执行生成器函数；async/await语法内部已经帮我们实现好了，直接用就完了）
• 补充：所谓async其实就是将Generator包裹了一层co函数，所以它被称为：Generator和Promise的语法糖；

const data = [//模拟发送网络请求拿到的数据
  {//接口为：http://test.org/;可拿到该对象数据
    portProp: 'kobe',
    data: ['aaa', 'bbb', 'ccc']
  },
  {//接口为：http://test.org/kobe;可拿到该对象数据
    portProp: 'james',
    data: ['ddd', 'eee', 'fff']
  },
  {//接口为：http://test.org/james;可拿到该对象数据
    portProp: 'curry',
    data: ['ggg', 'hhh', 'iii']
  }
  ,
  {//接口为：http://test.org/curry;可拿到该对象数据
    portProp: 'rose',
    data: ['jjj', 'kkk', 'lll']
  }
]
//模拟发送请求的接口相关参数
let urlStr = 'http://test.org/'
let index = 0
//发送网络请求工具函数封装
function requestData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (url === urlStr) {
        urlStr = urlStr.slice(0, 16) + data[index].portProp //该操作是为了模拟网络请求-实现案例
        const res = data[index++]//网络请求拿到的数据
        resolve(res)//请求成功，回调出请求到的数据
      } else {
        reject('请求数据失败')//请求失败，抛出错误
      }
    }, 2000);
  })
}
//实现案例需求；

//1. 自动化执行生成器函数方案
// function* getData() {
//   const res1 = yield requestData(`http://test.org/`)//发送第一次网络请求
//   console.log('第一次网络请求拿到的数据：', res1)
//   const res2 = yield requestData(`http://test.org/${res1.portProp}`)//发送第二次网络请求
//   console.log('第二次网络请求拿到的数据：', res2)
//   const res3 = yield requestData(`http://test.org/${res2.portProp}`)//发送第三次网络请求
//   console.log('第三次网络请求拿到的数据：', res3)
//   const res4 = yield requestData(`http://test.org/${res3.portProp}`)//发送第四次网络请求
//   console.log('第四次网络请求拿到的数据：', res4)
// }

// // 封装自动化执行生成器函数(了解)  -> 递归写法
// function execGenFn(genFn) {
//   // 第一步：获取对应函数的generator
//   const generator = genFn()
//   // 第二步：定义一个递归函数
//   function exec(res) {
//     // result -> { done: true/false, value: 值/undefined }
//     const result = generator.next(res)
//     if (result.done) return
//     result.value.then(res => {//必须拿到该请求数据，才进行下一步执行（请求）
//       exec(res)
//     })
//   }
//   // 第三步：执行递归函数
//   exec()
// }

// execGenFn(getData)//这样我们就只要关心getData生成器内部的代码了


//2.由自动化执行生成器函数引出 -> async/await的解决方案 -> 语法后续学习 
//只要把生成器函数的*改成async；yield改成await即可 （不需要实现什么自动化执行生成器函数；async/await语法内部已经帮我们实现好了，直接用就完了）
async function getData1() {
  const res1 = await requestData(`http://test.org/`)//发送第一次网络请求
  console.log('第一次网络请求拿到的数据：', res1)
  const res2 = await requestData(`http://test.org/${res1.portProp}`)//发送第二次网络请求
  console.log('第二次网络请求拿到的数据：', res2)
  const res3 = await requestData(`http://test.org/${res2.portProp}`)//发送第三次网络请求
  console.log('第三次网络请求拿到的数据：', res3)
}

getData1()

3.async - await语法深入学习

3.1.异步函数 async function

• async关键字用于声明一个异步函数：

  • async是asynchronous单词的缩写，异步、非同步；
  • sync是synchronous单词的缩写，同步、同时；
  • 调用异步函数会返回一个Promise；如果异步函数内部有返回值，返回值相当于被包裹到Promise.resolve中

• async异步函数可以有很多中写法：

//1.异步函数在 函数声明中的写法
async function foo1() {}

//2.异步函数在 函数表达式中的写法
const foo2 = async function() {}

//3.异步函数在 箭头函数中的写法
const foo3 = async () => {}

//4.异步函数在 类中实例方法中的写法
class Person {
  async running() {}
}

3.2.异步函数的执行流程

• 异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行。
• 异步函数有返回值时，和普通函数会有区别：
  • 情况一：异步函数也可以有返回值，但是异步函数的返回值相当于被包裹到Promise.resolve中；
  • 情况二：如果我们的异步函数的返回值是Promise，状态会由返回的Promise决定；
  • 情况三：如果我们的异步函数的返回值是一个对象并且实现了thenable，那么会由对象的then方法来决定；

// 1- 情况一：异步函数也可以有返回值，但是异步函数的返回值相当于被包裹到Promise.resolve中；
async function foo1 () {
  return 'kobe'//相当于该返回值，会传入异步函数调用后返回的新的Promise中的回调函数resolve中进行回调；从而我们下面的.then方法，then方法里面的回调函数就可以拿到该返回值了
}

const promiseFoo1 = foo1()
promiseFoo1.then(res => {
  console.log(res)//kobe
})

// 2- 情况二：如果我们的异步函数的返回值是Promise，状态会由返回的Promise决定；
async function foo2 () {
  return new Promise(resolve => resolve(['aaa','bbb']))
}

const promiseFoo2 = foo2()
promiseFoo2.then(res => {
  console.log(res)//['aaa','bbb']
})

// 3- 情况三：如果我们的异步函数的返回值是一个对象并且实现了thenable，那么会由对象的then方法来决定；
async function foo3 () {
  return {then(reject) {
    reject('message error')
  }}
}

const promiseFoo3 = foo3()
promiseFoo3.then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)//message error
})

• 如果我们在async中抛出了异常，那么程序它并不会像普通函数一样报错，而是会作为Promise的reject来传递；(从而不会影响下面的代码执行)

async function foo() {
  console.log('异步函数执行了！')
  throw new Error("抛出了一个错误：error...")
}
const promiseFoo = foo()
promiseFoo.then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)//抛出了一个错误：error...
  console.log('----------')
})

setTimeout(() => {
  console.log('+++++++++++')
}, 2000);

3.3.await关键字

• async函数另外一个特殊之处就是可以在它内部使用await关键字，而普通函数中是不可以的。
• await关键字有什么特点呢？
  • 通常使用await是后面会跟上一个表达式，这个表达式如果返回的是一个Promise；
  • 那么await会等到Promise的状态变成fulfilled状态，之后继续执行异步函数；

const data = [//模拟发送网络请求拿到的数据
  {//接口为：http://test.org/;可拿到该对象数据
    portProp: 'kobe',
    data: ['aaa', 'bbb', 'ccc']
  },
  {//接口为：http://test.org/kobe;可拿到该对象数据
    portProp: 'james',
    data: ['ddd', 'eee', 'fff']
  },
  {//接口为：http://test.org/james;可拿到该对象数据
    portProp: 'curry',
    data: ['ggg', 'hhh', 'iii']
  }
  ,
  {//接口为：http://test.org/curry;可拿到该对象数据
    portProp: 'rose',
    data: ['jjj', 'kkk', 'lll']
  }
]
//模拟发送请求的接口相关参数
let urlStr = 'http://test.org/'
let index = 0
//发送网络请求工具函数封装
function requestData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (url === urlStr) {
        urlStr = urlStr.slice(0, 16) + data[index].portProp //该操作是为了模拟网络请求-实现案例
        const res = data[index++]//网络请求拿到的数据
        resolve(res)//请求成功，回调出请求到的数据
      } else {
        reject('请求数据失败')//请求失败，抛出错误
      }
    }, 2000);
  })
}

async function getData1() {
  const res1 = await requestData(`http://test.org/`)//发送第一次网络请求
  console.log('第一次网络请求拿到的数据：', res1)
  const res2 = await requestData(`http://test.org/${res1.portProp}`)//发送第二次网络请求
  console.log('第二次网络请求拿到的数据：', res2)
  const res3 = await requestData(`http://test.org/${res2.portProp}`)//发送第三次网络请求
  console.log('第三次网络请求拿到的数据：', res3)
}

getData1()

• 如果await后面是一个普通的值，那么会直接返回这个值；
• 如果await后面是一个thenable的对象，那么会根据对象的then方法调用来决定后续的值；
• 如果await后面的表达式，返回的Promise是reject的状态，那么会将这个reject结果直接作为函数的Promise的reject值；

//1.没有抛出错误的情况
async function foo() {
  const res1 = await ['aaa', 'bbb']
  console.log(res1)//[ 'aaa', 'bbb' ]

  const res2 = await Promise.resolve('kobe')
  console.log(res2)//kobe

  const res3 = await { then(resolve) { resolve('james') } }
  console.log(res3)//james

  return 'curry'
}
const promiseFoo = foo()
promiseFoo.then(res => {
  console.log(res)//curry
}).catch(err => {
  console.log(err)
})


//2.有抛出错误的情况
async function foo1() {
  const res1 = await ['aaa', 'bbb']
  console.log(res1)//[ 'aaa', 'bbb' ]
  // throw new Error('error message')
  const res2 = await Promise.reject('error message')
  console.log(res2)

  const res3 = await { then(resolve) { resolve('james') } }
  console.log(res3)
  return 'curry'
}
const promiseFoo1 = foo1()
promiseFoo1.then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)//'error message'
})

• 注意：不管await后面的值是什么，当前行的赋值操作及后面的代码，都会作为事件循环的微任务，会放在微任务队列中 等待全局代码执行完，再执行（事件循环，微任务，宏任务后面会进行学习）

console.log('script start')

async function foo() {
  const res = await 520
  console.log('微任务代码执行：',res)
}
foo()
console.log('script end')

/**打印结果如下
 * script start
 * script end
 * 微任务代码执行： 520
 */

3.4.await后面也可以是一个异步函数

const res = ['kobe','james','rose']
function requestData(i) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(`第${i}次网络请求到的数据:${res[i-1]}`)
    }, i*1000);
  })
}

async function foo(i) {
  return requestData(i)
}
async function bar() {
  return 'curry'
}
// await 后面可以是一个Promise；当然也可以是一个异步函数啦（异步函数调用返回的也是Promise）
async function request() {
  const res1 = await foo(1)
  console.log(res1)
  const res2 = await foo(2)
  console.log(res2)
  const res3 = await foo(3)
  console.log(res3)
  const res4 = await bar()
  console.log(res4)
}
request()