promise和async的实现

promise的含义

promise是一个异步编程的解决方法，简单来说，promise类似一个容器，里面保存着未来某个时间点才会结束的事件。

   new Promise((resolve,reject)=>{
       if(成功)){
           resolve()
       } else {
           reject()
       }
   })

而捕抓错误的写法是:

   promise.then(function(data){
       // success
   })
   .catch(function(err){
       // err
   })

promise有三种状态(并且状态是不可逆的):

pending:进行中
fulfilled: 已成功
rejected: 已经失败

状态改变，只能从padding变成fulfilled或者rejected

async函数的实现原理

async 函数返回一个promise对象，当函数执行的时候，一旦遇到await就会先返回，等到触发的异步操作完成后再继续执行后面的语句

image

async / await 的使用，只需要在function外加速async 然后再函数内部异步执行的函数添加await

Generator 函数

Generator函数是es6提供的一种异步编程的解决方案，语法行为与传统函数完全不一样。Generator函数最大的特点就是交出函数的执行权，并且可以多次返回，每次返回值作为迭代器的一部分保存下来，可以被我显示调用

从语法上，我们可以把他想象成一个状态机，封装了很多个内部状态。

执行Generator函数会返回一个遍历对象，也就是Generator函数除了是状态机还是一个遍历对象生成函数。返回遍历对象，可以依次遍历Generator函数内部的每一个状态。

形式上Generator函数是一个普通函数，但有两个特征。

function关键字与函数名之间有个*
函数体内使用yield表达式，定义不同的内部状态

而且当你直接调用一个Generator函数，它不会直接执行，返回的也不是函数运行结果，而是指向内部应用状态的指针对象，就是遍历对象

然后下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部，或者上次的地方执行，直到遇到下一个yield表达式(或者return语句为止)

所以你可以把yield当成一个暂停标记，而next方法可以恢复执行

而访问每一个状态就需要调用next。每次next会自动执行到下一个yield上，直到return

   
function* gen(){
   yield "hello";
   yield "world";
   return "ends"
}


let g1=gen()                // gen{<suspended>}

console.log(g1.next());    //  {value:'hello',done:false}

console.log(g1.next())     //  {value:"world",done:false}

console.log(g1.next())     //  {value:"ends",done:true}

console.log(g1.next())     // {value:undefined,done:true}

console.log(g1.next())     // {value:undefined,done:true}

Generator函数的实例。它具有状态值suspended和closed，suspended代表暂停，closed则为结束

一旦执行过return之后，，以后再调用这个方法返回的也是这个值

总结:

调用Generator函数，返回的都是一个遍历对象，代表Generator函数内部的指针，之后的每次调Generator的next方法，就会返回一个有着value和done两个属性。value属性表示当前内部的值，也就是yield的后面的值。 done属性的值，是一个布尔值，表示遍历是否已经结束。

yield

yield表达式

由于Generator函数返回的是遍历对象，而要想继续执行则需要调用next方法才能执行下一个内部的状态，所以实际提供了一个可以暂停的函数函数就是yield

关于next的运行逻辑如下:

遇到yield表达式，就暂停执行后面的操作，并且将yield后面的值作为对象的value
下一次调用next方法的时候，再继续往下执行，直到遇到下一个yield表达式
如果没有遇到下一个yield，则会直接运行到函数结束，直到return为止，并且返回return的值
如果没有return，则返回的value中为undefined

yield的存在，相当于为javascript提供了惰性求值的语法功能。

如果Generator函数内部不使用yieldb表达式，这时就变成了一个单纯的暂缓执行函数

       function* gen(){
       console.log("执行了！")
   }

   let g1=gen()

   console.log(g1);   //  gen {<suspended>}

像上述代码，如果你想执行，则需要使用next函数才能执行

   function* gen(){
       console.log("执行了！");  //  执行了！
   }

   let g1=gen()

   console.log(g1.next());   //  {value:undefined,done:true}

而且yield只能只用在Generator函数中，使用在普通函数中会报错。

另外，yield表达式如果在另一个表达式中，必须放上圆括号

  function* demo() {
  console.log('Hello' + yield); // SyntaxError
  console.log('Hello' + yield 123); // SyntaxError

  console.log('Hello' + (yield)); // OK
  console.log('Hello' + (yield 123)); // OK
}

yield 委托*

在Generator函数中有时候，会需要将多个迭代器的值合在一起。我们可以用yield*形式，将执行委托给另外一个Generator函数

  function* foo1() {
  yield 1;
  yield 2;
  return "foo1 end";
}

function* foo2() {
  yield 3;
  yield 4;
}

function* foo() {
  yield* foo1();
  yield* foo2();
  yield 5;
}

const iterator = foo();

console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"
console.log(iterator.next()); // "{ value: 3, done: false }"
console.log(iterator.next()); // "{ value: 4, done: false }"
console.log(iterator.next()); // "{ value: 5, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"

我们可以看到，并没有执行foo1中的return语句，那是因为，在整个Generator函数只能有一次return，所有的yield*在Generator函数都是以函数表达式的形式出现的。return的值是表达式的结果，在委托结束之前其内部都是停止的，等待到表达式的结束的时候，直接返回给foo，但是此时foo没有接收这个变量所以，并未打印

如图就是接收foo1中return值的写法

image

next方法传参

yield本身没有返回值，它总是会返回undefined。next方法可以携带一个参数，该参数会被当作yield表达式的值
如下图:

image

同理如果next不携带参数，它返回的就是undefined

由于Generator函数从暂停状态到恢复运行，它的上下文(context)是不变的，通过next传参这个功能可以让Generator函数在不同阶段的运行阶段，从外部向内部注入值，从而调整函数的行为

throw方法

throw根据函数中书写try catch返回catch中的内容，如果没有写try则直接抛出异常

image

可以看到一旦我们抛出了错误，那么Generator的状态直接就会改变成true。而且value会变成undefined。

需要注意的是，如果我们执行throw()的时候Generator函数里面没有try Catch则会直接报错。如下

function* foo(x) {
   yield x + 1
   try {
       yield x + 2
   } catch (e) {
       console.log('catch it')
   }
}
const result = foo(0) // foo {<suspended>}
result.next(); // {value: 1, done: false}
result.throw(); // Uncaught undefined
result.next(); //{value: undefined, done: true}

上面的错误是因为，此时的语句还没执行到try里面。

iterator 迭代器

任意一个对象的Symbol.iterator方法，等于该对象的遍历器生成函数，调用该函数会返回对象的一个遍历器对象

而由于Generator函数就是遍历器生成函数，因此可以把Generator赋值给对象的Symbol.iterator属性，从而使得该对象具有Iterator接口

image

可以看到尝试使用for...of遍历object时，会报错obj is not iterable对象不能被遍历

下面我们尝试使用iterator接口

image

如果对象是key:value类型，控制台也能打印出相对应的value

image

实现 Async await

image

在执行过程中，判断一个函数的promise是否已经执行完(因为promise完成会return值，return代表这个yield表达式以及完成)，如果完成直接返回值，没有则继续重复这个步骤

总结

通过理解了Generator函数，再看async/await的实现是比较简单的。因为其实就是利用Generator函数的能够暂停的特性，和通过yield能够获取表达式的执行状态，从而去判断promise的执行是否已经完成。

参考资料：https://www.jianshu.com/p/f703d3f54ebd
参考资料：https://www.jianshu.com/p/0f1b6ae1888c
参考资料: https://mp.weixin.qq.com/s/gT9MF1l52HuKUpmeNIByCQ