[面试专题]JS异步之Promise,Generator,Async

Bertha 。 2022-02-24 04:14 298阅读 0赞

# JS异步之Promise,Generator,Async #

--------------------

### Promise ###

1.  解决的问题:回调地狱
2.  Promise规范:

*  promise有三种状态，等待（pending）、已完成（fulfilled/resolved）、已拒绝（rejected）.Promise的状态只能从“等待”转到“完成”或者“拒绝”，不能逆向转换，同时“完成”和“拒绝”也不能相互转换.
 *  promise 必须提供一个 then方法以访问其当前值、终值和据因。promise.then(resolve, reject),resolve 和 reject都是可选参数。如果 resolve 或reject 不是函数，其必须被忽略.
 *  then 方法必须返回一个 promise 对象.

1.  使用:

*  实例化promise对象需要传入函数(包含两个参数),resolve和reject,内部确定状态.resolve和reject函数可以传入参数在回调函数中使用.  
    resolve和reject都是函数,传入的参数在then的回调函数中接收.

*  then接收两个函数,分别对应resolve和reject状态的回调,函数中接收实例化时传入的参数.

promise.then(val=>{
      //resolved
    },reason=>{
      //rejected
    })

*  catch相当于.then(null, rejection)  
    当then中没有传入rejection时,错误会冒泡进入catch函数中,若传入了rejection,则错误会被rejection捕获,而且不会进入catch.此外,then中的回调函数中发生的错误只会在下一级的then中被捕获,不会影响该promise的状态.

new Promise((resolve,reject)=>{
       throw new Error('错误')
     }).then(null,(err)=>{
       console.log(err,1);//此处捕获
     }).catch((err)=>{
       console.log(err,2);
     });
     // 对比
     new Promise((resolve,reject)=>{
       throw new Error('错误')
     }).then(null,null).catch((err)=>{
       console.log(err,2);//此处捕获
     });
     // 错误示例
     new Promise((resolve,reject)=>{
       resolve('正常');
     }).then((val)=>{
       throw new Error('回调函数中错误')
     },(err)=>{
       console.log(err,1);
     }).then(null,(err)=>{
       console.log(err,2);//此处捕获,也可用catch
     });

*  两者不等价的情况:  
    此时，catch捕获的并不是p1的错误，而是p2的错误，

p1().then(res=>{ 
            return p2()//p2返回一个promise对象 
         }).catch(err=> console.log(err))

*  一个错误捕获的错误用例:  
    该函数调用中即使发生了错误依然会进入then中的resolve的回调函数,因为函数p1中实例化promise对象时已经调用了catch,若发生错误会进入catch中,此时会返回一个新的promise,因此即使发生错误依然会进入p1函数的then链中的resolve回调函数.

*  Promise回调链:
    
     *  promise能够在回调函数里面使用 return 和 throw， 所以在then中可以return出一个promise对象或其他值，也可以throw出一个错误对象，但如果没有return，将默认返回 undefined，那么后面的then中的回调参数接收到的将是undefined.

### Generator函数： ###

*  generator函数使用:  
    1、分段执行，可以暂停

2、可以控制阶段和每个阶段的返回值  
3、可以知道是否执行到结尾

function* g() {
        var o = 1;
        yield o++;
        yield o++;
    }
    var gen = g();
    
    console.log(gen.next()); //  Object {value: 1, done: false}
    
    var xxx = g();
    
    console.log(gen.next()); // Object {value: 2, done: false}
    console.log(xxx.next()); // Object {value: 1, done: false}
    console.log(gen.next()); // Object {value: undefined, done: true}

*  generator和异步控制:  
    利用Generator函数的暂停执行的效果，可以把异步操作写在yield语句里面，等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了，因为异步操作的后续操作可以放在yield语句下面，反正要等到调用next方法时再执行。所以，Generator函数的一个重要实际意义就是用来处理异步操作，改写回调函数。

### async和异步: ###

*  用法:
    
     *  async 表示这是一个async函数，await只能用在这个函数里面。
     *  await 表示在这里等待异步操作返回结果，再继续执行。
     *  await 后一般是一个promise对象
 *  示例:async用于定义一个异步函数，该函数返回一个Promise。  
    如果async函数返回的是一个同步的值，这个值将被包装成一个理解resolve的Promise，等同于return Promise.resolve(value)。

await用于一个异步操作之前，表示要“等待”这个异步操作的返回值。await也可以用于一个同步的值。

参考:  
[Promise迷你书][Promise]  
[promise笔记][promise]  
[手写promise][promise 1]  
[promise实现][promise 2]

[Promise]: http://liubin.org/promises-book/
[promise]: http://coderlt.coding.me/2016/07/17/ES6-promise/
[promise 1]: https://segmentfault.com/a/1190000006103601
[promise 2]: https://segmentfault.com/a/1190000000684654