Promise 学习

Promise 学习

回调地狱

什么是回调地狱

多层回调函数的相互嵌套,就形成了回调地域,示例如下:
在这里插入图片描述
是不是很恐怖,就像是套娃一样。

回调地狱的缺点

  • 代码耦合性太强,牵一发而动全身,难以维护。
  • 大量冗余代码相互嵌套,代码的可读性和可复用性变差。

如何解决回调地狱问题

为了解决回调地狱的问题,ES6中新增了 Promise的概念。

Promise 的概念

  1. Promise 是一个构造函数。

    我们可以创建Promise的实例 const p = new Promise()
    new出来的Promise实例对象,代表一个异步操作。

  2. Promise.prototype 上包含一个 .then() 方法。

    每一次new Promise() 构造函数得到的实例对象,都可以通过原型链的方式访问到 .then() 方法,例如 p.then()

  3. .then() 方法用来预先指定成功和失败的回调函数。
    p.then(成功的回调函数,失败的回调函数)
    p.then(result => {} , error => {} )
    调用 .then() 的时候,成功的回调函数是必须填写的,但是失败的回调函数是可以选择的。

基于Promise按顺序读取文件内容

就是说要去请求三个文件,依次是文件一、文件二、文件三。但是不能保证文件的获取顺序,如果一次嵌套执行,就造成了回调地狱,所以呢,那么promise就派上用场了。

.then() 方法的特性

如果上一个 .then() 方法中返回了一个新的Promise实例对象,则可以通过下一个 .then() 继续进行处理,通过 .then() 方法的链式调用,就解决了回调地域的问题。

Promise支持链式调用,从而解决回调地狱的问题:

说明:本文中 thenFs 是一个读取文件插件,返回的是一个 Promise 实例

在这里插入图片描述

通过 .catch 捕获错误

在 Promise 的链式操作中如果发生错误,可以使用 Promise.prototype.catch 方法进行捕获和处理:
在这里插入图片描述
当遇到错误,后面的 .then() 都不会在执行了,直接执行 .catch()方法中的内容。

如果我们不希望前面的错误导致后面的 .then() 无法正常工作,则可以将 .catch() 的调用提前,就像下面一样:
在这里插入图片描述

Promise.all()

Promise.all() 方法会发起并行的 Promise 异步操作,等所有的异步操作全部结束之后才会执行下一步的 .then() 操作(等待机制)。示例代码:
在这里插入图片描述

Promise.race()

Promise.race() 方法会发起并行的 Promise 异步操作,只要任何一个异步操作完成,就会立即执行下一步的 .then() 操作(赛跑机制)。示例代码如下:
在这里插入图片描述
先执行完之后,后边的都没了就,只有一个。

Promise 调用 resolve 和 reject 回调函数

Promise 异步操作的结果,可以调用 resolve 或 reject 回调函数进行处理,示例如下:
在这里插入图片描述

async/await

什么是 async/await

async/await 是ES8中引入的新语法,用来简化Promise异步操作,在 async/await 出现之前,开发者只能通过链式.then()的方式处理Promise异步操作,示例代码如下:
在这里插入图片描述
上面 .then 的链式调用方法优点是解决了回调地狱的问题,但是代码比较冗余,阅读性差劲,不容易理解。

所以官方推出了async/await

async/await 基本使用

使用 async/await 简化Promise异步操作的实例代码如下:
在这里插入图片描述
使用 await 修饰过后的返回值,不再是Promise实例,而是变成了调用成功的值,如果方法中用到了 await,那么这个方法必须被 async 修饰

async/await 使用的注意事项

  1. 如果在 function 中使用了 await, 那么这个 function 必须使用 async 修饰。
  2. 在 async方法中,第一个await 之前的代码会同步执行,await之后的代码会异步执行。
    在这里插入图片描述

结束了!

【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处!
【重要说明】本文为本菜鸟的学习记录,论点和观点仅代表个人不代表此技术的真理,目的是学习和可能成为向别人分享的经验,因此有错误会虚心接受改正,但不代表此时博文无误!
【博客园地址】JayveeWong: http://www.cnblogs.com/wjw1014
【CSDN地址】JayveeWong: https://blog.csdn.net/weixin_42776111
【Gitee地址】Jayvee:https://gitee.com/wjw1014
【GitHub地址】Jayvee:https://github.com/wjw1014
原文地址:https://www.cnblogs.com/wjw1014/p/15480829.html