Promise Generator async/await

Promise(ES6)

1.代表异步操作,有三种状态:

  • Pending(进行中、未完成的)
  • Resolved(已完成,又称Fulfilled)
  • Rejected(已失败)

2.优点:

  • 解决回调地域(call hell)问题
  • 能更好的进行错误捕获
    • promises 通过reject方法吧Promise的状态设置为rejected,这样我们在then中就能捕获到,然后指向“失败”情况的回调。
    • 在这里插入图片描述
    • 结果如下:
    • 在这里插入图片描述
      当然我们在 catch 方法中处理 reject 回调也是可以的。
      在这里插入图片描述
      结果和上面的一样

3.then()方法:把原来的回调写法分离出来,在异步操作执行完成后,用力按时调用的方式执行回调函数。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190228102851623.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTM0Nzc1,size_16,color_FFFFFF,t_70在这里插入图片描述
结果如下:
在这里插入图片描述
4.reject()方法:
上面样例我们通过 resolve 方法把 Promise 的状态置为完成态(Resolved),这时 then 方法就能捕捉到变化,并执行“成功”情况的回调。
而 reject 方法就是把 Promise 的状态置为已失败(Rejected),这时 then 方法执行“失败”情况的回调(then 方法的第二参数)。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190228103323235.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTM0Nzc1,size_16,color_FFFFFF,t_70在这里插入图片描述
结果如下:
在这里插入图片描述
如果我们只要处理失败的情况可以使用 then(null, ...),或是使用接下来要讲的 catch 方法。
在这里插入图片描述
或者:

cook.then(null).catch(function(data){console.log(data+'没法吃!')})

5.catch()方法:
a.它可以和 then 的第二个参数一样,用来指定 reject 的回调
在这里插入图片描述
b.它的另一个作用是,当执行 resolve 的回调(也就是上面 then 中的第一个参数)时,如果抛出异常了(代码出错了),那么也不会报错卡死 js,而是会进到这个 catch 方法中。
在这里插入图片描述
结果如下:
在这里插入图片描述

Generator(ES6)

1:function和函数名之间有一个*号, 2:函数体内部使用了yield表达式;
Generator函数返回的Iterator运行的过程中,如果碰到了yield, 就会把yield后面的值返回, 此时函数相当于停止了, 下次再执行next()方法的时候, 函数又会从上次退出去的地方重新开始执行;
如果把yield和return一起使用的话, 那么return的值也会作为最后的返回值, 如果return语句后面还有yield, 那么这些yield不生效:
在这里插入图片描述

next()方法:

Generator函数返回的Iterator执行next()方法以后, 返回值的结构为:
在这里插入图片描述

async await(ES7)

  • async用来申明里面包裹的内容可以进行同步的方式执行,await则是进行执行顺序控制,每次执行一个await,程序都会暂停等待await返回值,然后再执行之后的await。
  • await后面调用的函数需要返回一个promise,另外这个函数是一个普通的函数即可,而不是generator。
  • await只能用在async函数之中,用在普通函数中会报错。
  • await命令后面的 Promise 对象,运行结果可能是 rejected,所以最好把 await 命令放在 try…catch 代码块中。
  • 在这里插入图片描述
    在这里插入图片描述
    结果如下:
    在这里插入图片描述
    优点:相比直接使用 Promise 来说,优势在于处理 then 的调用链,能够更清晰准确的写出代码。
    缺点:滥用 await 可能会导致性能问题,因为 await 会阻塞代码,也许之后的异步代码并不依赖于前者,但仍然需要等待前者完成,导致代码失去了并发性。
    在这里插入图片描述
    结果如下:
    在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_36934775/article/details/88018647
今日推荐