Promise && Generator

再仔细地学一遍Promise Generator

1. 生成器函数 返回一个迭代器

const generatorFunction = function* () {};
const iterator = generatorFunction();
console.log(iterator[Symbol.iterator]);
// function [Symbol.iterator()]

2. 迭代器什么也不会执行

const generatorFunction = function* () {
  console.log("a");
};

console.log(1);
const iterator = generatorFunction();
console.log(2);
// 1
// 2

3.. next()方法用于推进生成器体的执行:

const generatorFunction = function* () {
  console.log("a");
};

console.log(1);
const iterator = generatorFunction();
console.log(2);
iterator.next();
console.log(3);

// 1
// 2
// a
// 3

4. next()方法返回一个对象，该对象指示迭代的进展:

const generatorFunction = function* () {};
const iterator = generatorFunction();
console.log(iterator.next());
// Object {value: undefined, done: true}

5. 生成器函数将使用yield关键字。yield暂停生成器的执行，并将控制权返回给迭代器。

const generatorFunction = function* () {
  yield;
};
const iterator = generatorFunction();
console.log(iterator.next());
console.log(iterator.next());

6. 挂起时，生成器不会阻塞事件队列:

const generatorFunction = function* () {
  var i = 0;
  while (true) {
    yield i++;
  }
};

const iterator = generatorFunction();
console.log(iterator.next);
console.log(iterator.next);
console.log(iterator.next);
console.log(iterator.next);
console.log(iterator.next);
console.log(iterator.next);
// Object {value: 0, done: false}
// Object {value: 1, done: false}
// Object {value: 2, done: false}
// Object {value: 3, done: false}
// Object {value: 4, done: false}
// Object {value: 5, done: false}

7. 将一个值传递给迭代器

8 yield关键字可以将一个值返回给迭代器:

const generatorFunction = function* () {
  yield "foo";
};

iterator = generatorFunction();
console.log(iterator.next());
console.log(iterator.next());

// Object {value: "foo", done: false}
// Object {value: undefined, done: true}

9. 可以生成任何数据类型，包括函数、数字、数组和对象。当生成器被推进到完成时，返回值被返回。

const generatorFunction = function* () {
  yield "foo";
  return "bar";
};
const iterator = generatorFunction();
console.log(iterator.next());
console.log(iterator.next());

// Object {value: 'foo', done: false}
// Object {value: 'bar}, done: true}

10. yield关键字可以从迭代器返回一个值:

const generatorFunction = function* () {
  console.log(yield);
};
const iterator = generatorFunction();
iterator.next("foo");
iterator.next("bar");
// bar
// 第一个foo不要了 值直接被丢弃 一开始在这里卡了一下 不理解
// 现在的理解是这个样子的
// yield会有一个返回值 第一个foo的返回值被第二个bar覆盖了，然后第一个foo就没有位置输出，输出的是bar

11. 理解执行流程

// 使用for of 迭代 迭代器

let index;

const foo = function* () {
  yield "foo";
  yield* bar();
};
const bar = function* () {
  yield "bar";
  yield* barz();
};
const baz = function* () {
  yield "baz";
};

for (index of foo()) {
  console.log(index);
}

// foo
// bar
// baz
// 将生成器函数嵌套在另一个生成器当中执行实际上 与 将目标生成器函数的主体导入目标生成器相同
// 上述代码等同于

let index;

const foo = function* () {
  yield "foo";
  yield "bar";
  yield "baz";
};

for (index of foo()) {
  console.log(index);
}
// foo
// bar
// baz

12. 除了使用 next()推进生成器实例之外，您还可以throw()。抛出的任何东西都会传递回生成器的代码，也就是说，它可以在生成器实例内部或外部处理:

const generatorFunction = function* () {
  while (true) {
    try {
      yield;
    } catch (e) {
      if (e != "a") {
        throw e;
      }
      console.log("Generator caught", e);
    }
  }
};

const iterator = generatorFunction();
iterator.next();
try {
  iterator.throw("a");
  itrrator.throw("b");
} catch (e) {
  console.log("Uncaught", e);
}
// 所有的数据都能够被抛出，包括函数、数字、数组和对象

13. 生成器函数解决了什么问题？

// 地狱回调

// tonic ^6.0.0
const foo = (name, callback) => {
  setTimeout(() => {
    callback(name);
  }, 100);
};

foo("a", (a) => {
  foo("b", (b) => {
    foo("c", (c) => {
      console.log(a, b, c);
    });
  });
});

// a
// b
// c

// 解决方法
// tonic ^6.0.0
(function* () {
  const a = yield curry(foo, "a");
  const b = yield curry(foo, "b");
  const c = yield curry(foo, "c");

  console.log(a, b, c);
});

// 要执行生成器，我们需要一个控制器。控制器需要完成异步请求并返回结果。
const controller = (generator) => {
  const iterator = generator();

  const advancer = (response) => {
    // Advance the iterator using the response of an asynchronous callback.
    const state = iterator.next(response);

​    if (!state.done) {
​      // Make the asynchronous function call the advancer.
​      state.value(advancer);
​    }
  };

  advancer();
};

14.promise 三个用途

用途 1. Linear build tests for async tool

watch({}, function* (compilation) {
  yield compilation(); // pause and wait
  t.false(fs.readdirSync("./node_modules").includes("lodash"));

  // make changes
  const packageJson = JSON.parse(fs.readFileSync("package.json", "utf8"));
  packageJson.dependencies.lodash = "*";
  fs.writeFileSync("package.json", JSON.stringify(packageJson, null, 2));

  yield compilation(); // pause and wait
  // assert they were reflected
  t.true(fs.readdirSync("./node_modules").includes("lodash"));
  t.end();
});

用途 2. co

co is a generator interpreter which allows you to write nicer, more linear code for promises.

// Instead of this nested code：
getUser().then((user) => getComments(user));

// You have this:
co(function* () {
  const user = yield getUser();
  const comments = yield getComments(user);
});

用途 3.redux saga

这个是用的比较多的 来详细的写一下

在Redux架构中管理副作用是一件轻而易举的事情。

在一个叫做saga的program中，将逻辑上相关的行为片段分组，而不是分散在许许多多的creatos和reducers，用过原生redux库的都知道，要么把reducer与action写在一起，要么被分开写时文件来回切换倒腾 折腾死。

redux-saga有许多的command，使用最多的有以下几个

• take(ACTION_NAME) —— 等待一个名为ACTION_NAME的action被dispatched，然后return 一个 action object
• put(action)—— dispatch 一个action
• call(promiseFn)—— class a function that returns a promise, and waits for it to resolve, Returns what the promise resolved to
• &others