开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第24天，点击查看活动详情

🎈大家好，我是李乐一，新人初来乍到，请多多关照~

📝小小的前端一枚，分享一些日常的学习和项目实战总结~

😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

写在前面

前端如何解决异步请求，是我们项目经常需要用到的，总结一下

Iterator

我们常用的 for in 循环，都是通过调用被循环对象的 Iterator 来实现的，在 Symbol 引入之后，我们就可以通过 Symbol.iterator 来直接读写这个特殊函数。

对于循环语句来说，只负责调用 data[Symbol.iterator] 函数，然后根据返回值来进行循环。所以任何对象只要提供了标准的 Iterator 接口就可以被循环

📝举个栗子

var students = {}
students[Symbol.iterator] = function() {
  let index = 1;
  return { next() {
    return {done: index>100, value: index++} }
  }
}

for(var i of students) { console.log(i); }

Generator

Generator是ES6引入的新语法，Generator是一个可以暂停和继续执行的函数。简单来说可以当做一个Iterator来用，进行一些遍历操作。也可以在内部保存一些状态，成为一个状态机。

Generator 基本语法包含两部分：

函数名前要加一个星号
函数内部用 yield 关键字返回值

📝举个栗子

function * count() {
  yield 1
  yield 2
  return 3
}
var c = count()
console.log(c.next()) // { value: 1, done: false }
console.log(c.next()) // { value: 2, done: false }
console.log(c.next()) // { value: 3, done: true }
console.log(c.next()) // { value: undefined, done: true }

由于Generator也存在 Symbol.iterator 接口，所以他也可以被 for 循环调用：

function * count() {
  yield 1
  yield 2
  return 3
}
var c = count()
for (i of c) console.log(i) // 1, 2

注意：调用 next 的时候能得到 3 ，但是用 for 则会忽略最后的 return 语句。也就是 for 循环会忽略 generator 中的 return 语句.

Generator VS Iterator

Generator 可以看做是一个更加灵活的 Iterator ，是互通的， Generator 可以通过 yield 随时暂停，所以可以很方便的进行流程控制和状态管理，而 Iterator 就可能需要你写更多的代码进行相同的操作：

function* traverseTree(node) {
    if (node == null) return;
    yield* traverseTree(node.left);
    yield node.value;
    yield* traverseTree(node.right);
}

同样的功能用 iterator 实现就会变得麻烦很多。

Generator 也是实现简单的状态机的最佳选择，因为他是在函数内部进行 yield 操作，因此不会丢失当前状态：

function * clock () {
  yield 'tick'
  yield 'tock'
}

同样的功能如果普通的函数，因为每次都是调用这个函数，所以函数内部并不能保存状态，就需要在函数外面用一个变量来保存当前状态

let tick = false
function clock() {
  tick = !tick
  return tick ? 'tick' : 'tock'
}

其实Babel编译 Generator 的时候，也是用了一个 Context 来保存当前状态的，可以看看Babel编译后的代码，其中的 _context 就是当前状态，这里通过 _context.next 的值来控制调用 next 的时候应该进入到哪一个流程：

var _marked = /*#__PURE__*/regeneratorRuntime.mark(clock);

function clock() {
  return regeneratorRuntime.wrap(function clock$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          _context.next = 2;
          return 'tick';

        case 2:
          _context.next = 4;
          return 'tock';

        case 4:
        case 'end':
          return _context.stop();
      }
    }
  }, _marked, this);
}

Generator 异步操作

Generator可以很方便执行异步操作

📝举个栗子我们需要写一个小函数，可以取到用户信息然后打印出来，用generator来实现

function * fetchUser () {
  const user = yield ajax()
  console.log(user)
}

但是，generator本身并不会自动进行 next 操作

const f = fetchUser()

因为Generator 本身只是一个状态机，他需要由调用者来改变他的状态，我们需要额外加一段控制代码来控制 fetchUser 进行状态转换:

function * fetchUser () {
  const user = yield ajax()
  console.log(user)
}

const f = fetchUser()

// 加入的控制代码
const result = f.next()
result.value.then((d) => {
  f.next(d)
})

Async/Await

其实是 Generator 的一个语法糖：

async 对应的是 *
await 对应的是 yield

自动帮我们进行了 Generator 的流程控制而已。

💡代码实现

async function fetchUser() {
  const user = await ajax()
  console.log(user)
}

我们不用手动在ajax成功的时候手动调用 next。相比于 Promise 或者 Generator 的实现，代码要明显更加优雅。

可以认为： async/await == generator + promise

async/await 并发

代码在执行到await的时候会等待结果返回才执行下一行，当我们有很多需要异步执行的操作就会变成一个串行的流程，会导致非常慢。

如果我们把它变成一个并行的操作，将会极大提升效率

const users = await Promise.all(ids.map(async (id) => await db.get(id)))

总结

Iterator 是一个循环接口，任何实现了此接口的数据都可以被 for in 循环遍历
Generator 是一个可以暂停和继续执行的函数，他可以完全实现 Iterator 的功能，并且由于可以保存上下文，他非常适合实现简单的状态机。另外通过一些流程控制代码的配合，可以比较容易进行异步操作。
Async/Await 就是generator进行异步操作的语法糖。

前端常见的异步解决方案