promise generator aysnc/await的区别

JavaScript

---

一、promise

当面试官问你：

1. 什么是promise？
2. 你对promise的理解？
3. promise用过吗？
4. ------------------------------------------------------------------------------------------------------------------

1. 什么是promise

• 解决地狱回调
• 可以链式调用
• 有三种状态。
• promise有哪些API.
• 应用场景：封装ajax,axios的get,post封装，微信小程序中封装wx.request()，uniapp开发中uni.request()

名词约定

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

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

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

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

什么是Promise？

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

Promise的两个特点

• Promise对象的状态不受外界影响
• 1）pending 初始状态
• 2）fulfilled 成功状态
• 3）rejected 失败状态
• Promise 有以上三种状态，只有异步操作的结果可以决定当前是哪一种状态，其他任何操作都无法改变这个状态
• Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，只能由 pending变成fulfilled或者由pending变成rejected
• Promise接受一个「函数」作为参数，该函数的两个参数分别是resolve和reject。这两个函数就是就是「回调函数」
• 1) resolve函数的作用：在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
• 2) reject函数的作用：在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

常用的API

then()方法   reject()方法   catch()方法    all()方法    race()方法

---

二、async、await

词法定义

• async

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

• await

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

      特点：

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

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是一个函数。不同于普通函数，是可以暂停执行的，所以函数名之前要加星号，以示区别。
• 整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器，异步操作需要暂停的地方，都用yield语句。

什么是Generator函数

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

• 但是，调用Generator函数后，函数并不执行，返回的也不是函数执行后的结果，而是一个指向内部状态的指针对象。
• 下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。即：每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。
• Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。
• next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法，会返回一个对象，表示当前阶段的信息（ value 属性和 done 属性）。
  value 属性是 yield 语句后面表达式的值，表示当前阶段的值；
  done 属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段(done为false 继续执行)。

• next():
  generator函数（生成器）调用的唯一方法,且注意需依次调用next方法,
  对于普通的生成器，第一次next调用，相当于启动生成器，会从生成器函数的第一行代码开始执行，直到第一次执行完yield语句后，跳出生成器函数。
  然后第二个next调用，进入生成器函数后，从yield语句的下一句语开始执行，然后重新运行到yield语句，执行后，跳出生成器函数，
  
  
   yield表达式只能用在 Generator 函数里面，用在其它地方都会报错
          
  

Generator 函数的数据交换

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

2.generator的用途：

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

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

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

---

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实例。
                      
    有点：让回调函数变成了规范的链式写法，程序流程可以看的很清楚
    缺点:编写的难度比传统写法高，阅读代码也不是一眼可以看懂

genertor

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

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

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

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

aysnc/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);
    }