Promise、async await、Generator

Promise

什么是Promise：

promise是es6 中专门用来处理异步回调的，可以解决回调地狱(一个函数内嵌套很多回调函数)

Promise是一个构造函数 ，这个构造函数中放一个回调函数作为参数，这个回调函数中放的是异步的操作 。

自己身上有all、reject、resolve等方法，原型上有then、catch等方法。

说白了 promise就是把原来的回调函数嵌套在里面的写法变成了链式写法（.then的写法）

promise三种状态：

Promise对象的状态不受外界影响

1）pending 初始状态 等待

2）fulfilled 成功状态 

3）rejected 失败状态 

1.Promise 有以上三种状态，只有异步操作的结果可以决定当前是哪一种状态，其他任何操作都无法改变这个状态    

2.Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，只能由 pending变成fulfilled或者由pending变成rejected

使用 new 来创建一个promise对象：

Promise接受一个「函数」作为参数，该函数的两个参数分别是resolve 和 reject 。这两个函数就是就是「回调函数」

resolve函数的作用：在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

const promise = new Promise((resolve, reject) => {
    // do something here ...
    if (success) {
        resolve(value); // fulfilled
    } else {
        reject(error); // rejected
    }
});

Promise的API：

1、then()方法：就是把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

2、catch()方法：(1)它可以和 then 的第二个参数一样，用来指定 reject 的回调。

(2)它的另一个作用是，当执行 resolve 的回调（也就是上面 then 中的第一个参数）时，如果抛出异常了（代码出错了），那么也不会报错卡死 js，而是会进到这个 catch 方法中。

3、all()方法： Promise 的 all 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

4、race()方法： race 按字面解释，就是赛跑的意思。race 的用法与 all 一样，只不过 all 是等所有异步操作都执行完毕后才执行 then 回调。而 race 的话只要有一个异步操作执行完毕，就立刻执行 then 回调。

---

async await

Async 和 await 是一种同步的写法，执行异步的操作

用法/特点：

1.async的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数

2.异步async函数调用，跟普通函数的使用方式一样

3.异步async函数返回一个promise对象

4.async函数配合await关键字使用(阻塞代码往下执行)是异步方法，但是阻塞式的

优点：

1.同步代码编写方式： Promise使用then函数进行链式调用，async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯；

2.多个参数传递： Promise的then函数只能传递一个参数，async可以同时传递多个参数

3.同步代码和异步代码可以一起编写：当然，异步过程需要包装成一个Promise对象放在await关键字后面；

4.async/await是对Promise的优化： async/await是基于Promise的，是进一步的一种优化，不过在写代码时，Promise本身的API出现得很少，很接近同步代码的写法；

使用场景：async主要来处理异步的操作，可以处理回调地狱 需求：执行第一步，将执行第一步的结果返回给第二步使用。在ajax中先拿到一个接口的返回数据，然后使用第一步返回的数据执行第二步操作的接口调用，达到异步操作。

---

Generator

什么是Generator：

1. 语法上，Generator 函数是一个状态机，封装了多个内部状态。
2. 形式上，Generator是一个函数。不同于普通函数，是可以暂停执行的，所以函数名之前要加星号，以示区别。
3. 整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器，异步操作需要暂停的地方，都用yield语句。

什么是Generator函数：

1. function 关键字和函数之间有一个星号(*),且内部使用yield表达式，定义不同的内部状态。
2. 调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。

Generator 函数的数据交换

1、迭代器协议： 定义了一种标准的方式来产生一个有限或无限序列的值；

当一个对象被认为是一个迭代器时，它实现了一个 next() 的方法

2.generator的用途：在JavaScript中,一个函数一旦被执行,就会执行到最后或者被return,运行期间不会被外部所影响打断,而generator的出现就打破了这种函数运行的完整性

3.generator函数与普通函数的区别:

 a.function关键字与函数名中间有一个*键
    b.Generator函数使用了yield表达式
    c. 直接调用 Generator函数并不会执行，也不会返回运行结果，而是返回一个遍历器对象（Iterator Object）
    d.调用Generator函数时需用到next(),如果有多个yield状态,要依次调用next()
    e.该生成器函数执行后会返回一个Iterator对象,对象内有yield的返回值,以及还有一个状态done的属性(该属性表示当前生成器内yield表达式全部执行完毕,执行完毕返回true)
    {
         done:true,//false迭代是否结束，
         value:v,//迭代器返回值
    }

4.generator函数的语法：

  // 传统函数
      function foo() {
         return 'hello world'
     }

     foo()   // 'hello world'，一旦调用立即执行


     //Generator函数
        function* persition(){
            yield '我是generato生成器';
            yield '我要开始了';
            return '结束'
        }
        //创建一个句柄，赋值给生成器
        var iterator =persition();
        //直接调用并不能被立即执行
        console.log(iterator)
        //需使用next()方法来调用这个生成器 next()方法调用一次,
        //并不能将Generator函数内的yield值全部打印出来，需要依次进行调用
        console.log(iterator.next())
        console.log(iterator.next())
        //如果iterator对象内done为true，证明Generator函数执行完毕
        console.log(iterator.next())

5.yield表达式:

    yield 表达式只能用在 Generator 函数里面，用在其它地方都会报错
        function(){
            yield 1;
        }
        // SyntaxError: Unexpected number
        // 在一个普通函数中使用yield表达式，结果产生一个句法错误
}

6.next():
generator函数（生成器）调用的唯一方法,且注意需依次调用next方法,
对于普通的生成器，第一次next调用，相当于启动生成器，会从生成器函数的第一行代码开始执行，直到第一次执行完yield语句后，跳出生成器函数。
然后第二个next调用，进入生成器函数后，从yield语句的下一句语开始执行，然后重新运行到yield语句，执行后，跳出生成器函数