promise、async,await、generator函数

Promise

---

一般来讲，有以下的名词约定：

• promise（首字母小写）对象指的是“Promise实例对象”

• Promise首字母大写且单数形式，表示“Promise构造函数”

• Promises首字母大写且复数形式，用于指代“Promises规范”

什么是Promise？

---

• Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
• 从语法上说，promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。
• Promise是一个构造函数，对外提供统一的 API，自己身上有all、reject、resolve等方法，原型上有then、catch等方法。

Promise的两个特点

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

              1）pending 初始状态

           2）fulfilled 成功状态

            3）rejected 失败状态

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

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

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

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

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

reject函数的作用：在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

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

 

Asynk,Await

async

async 是“异步”的简写， async 用于申明一个异步的 function

await

await 可以认为是 async wait 的简写，await 用于等待一个异步方法执行完成。

特点：

1. asayc的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数
2. 异步async函数调用，跟普通函数的使用方式一样
3. 异步async函数返回一个promise对象
4. async函数配合await关键字使用(阻塞代码往下执行)
5. 是异步方法，但是阻塞式的

async/await的优点

1. 方便级联调用：即调用依次发生的场景；
2. 同步代码编写方式： Promise使用then函数进行链式调用，一直点点点，是一种从左向右的横向写法；async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯；
3. 多个参数传递： Promise的then函数只能传递一个参数，虽然可以通过包装成对象来传递多个参数，但是会导致传递冗余信息，频繁的解析又重新组合参数，比较麻烦；async/await没有这个限制，可以当做普通的局部变量来处理，用let或者const定义的块级变量想怎么用就怎么用，想定义几个就定义几个，完全没有限制，也没有冗余工作；
4. 同步代码和异步代码可以一起编写： 使用Promise的时候最好将同步代码和异步代码放在不同的then节点中，这样结构更加清晰；async/await整个书写习惯都是同步的，不需要纠结同步和异步的区别，当然，异步过程需要包装成一个Promise对象放在await关键字后面；
5. sync/await是对Promise的优化： async/await是基于Promise的，是进一步的一种优化，不过在写代码时，Promise本身的API出现得很少，很接近同步代码的写法；

使用场景

 

• async主要来处理异步的操作，

• 需求：执行第一步，将执行第一步的结果返回给第二步使用。在ajax中先拿到一个接口的返回数据，后使用第一部返回的数据执行第二步操作的接口调用，达到异步操作。

Generator

函数的定义

 

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

什么是Generator函数

 

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

function fn(){ // 定义一个Generator函数
yield ‘hello’;
yield ‘world’;
return ‘end’;
}
var f1 =fn(); // 调用Generator函数
console.log(f1); // fn {[[GeneratorStatus]]: “suspended”}
console.log(f1.next()); // {value: “hello”, done: false}
console.log(f1.next()); // {value: “world”, done: false}
console.log(f1.next()); // {value: “end”, done: true}
console.log(f1.next()); // {value: undefined, done: true}

 

但是，调用Generator函数后，函数并不执行，返回的也不是函数执行后的结果，而是一个指向内部状态的指针对象。

下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。即：每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。

Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

 

promise generator aysnc/await

1.三者都是异步编程的解决方案,不同的是,promise为较早出来的,其次generator,最后为async/await,三者象征了前端进行解决异步编程的进化路程。

promise:

 promise比较简单，也是最常用的，主要就是将原来用  回调函数异步编程的方法  转成  relsove和reject触发事件；


    对象内含有四个方法，then()异步请求成功后
                      catch()异步请求错误的回调方法
                      finally()请求之后无论是什么状态都会执行
                      resolve()将现有对象转换为Promise对象
                      all()此方法用于将多个Promise实例包装成一个新的promise实例。
                      race()也是将多个Promise实例包装成一个新的promise实例
                      reject()返回一个状态为Rejected的新Promise实例。
                      
    有点：让回调函数变成了规范的链式写法，程序流程可以看的很清楚
    缺点:编写的难度比传统写法高，阅读代码也不是一眼可以看懂

 

Generator:

generator是一个迭代生成器,其返回值为迭代器(lterator),是ES6标准引入的新的数据类型，主要用于异步编程,它借鉴于Python中的generator概念和语法；

generator函数内有两个重要方法，1 yield表达式 2.next()

Generator 函数是分段执行的，yield表达式是暂停执行的标记，而 next方法可以恢复执行

优点：1.利用循环，每调用一次，就使用一次，不占内存空间 2.打破了普通函数执行的完整性
缺点: 需要用next()方法手动调用,直接调用返回无效iterator 2.

async/await:

   
    async：异步函数
    await：同步操作

     es7中提出来的异步解决方法,是目前解决异步编程终它基极解决方案,于promise为基础,其实也就是generator的高级语法糖,本身自己就相当于一个迭代生成器(状态机),它并不需要手动通过next()来调用自己,与普通函数一样
     
    async就相当于generator函数中的*,await相当于yield,

    async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。
     function getSomething() {
          return "something";
    }

    async function testAsync() {
        return Promise.resolve("hello async");
    }

    async function test() {
        //await是在等待一个async函数完成
        const v1 = await getSomething();
        //await后面不仅可以接Promise，还可以接普通函数或者直接量
        const v2 = await testAsync();
        console.log(v1, v2);
    }

 

总结：

从回调函数，到promise,再到generator,再到Async/await,这四种分别代表了JavaScript异步编程解决方案的进化路程。async和generator函数主要就是为了解决异步的并发调用使用的 ，直接将参数从then里取出来，相比promise的链式调用，传参更加方便，异步顺序更加清晰