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 实例


Promise 学习_回调函数_02

通过 .catch 捕获错误

在 Promise 的链式操作中如果发生错误,可以使用 ​​Promise.prototype.catch​​​ 方法进行捕获和处理:
Promise 学习_回调函数_03
当遇到错误,后面的 .then() 都不会在执行了,直接执行 .catch()方法中的内容。

如果我们不希望前面的错误导致后面的 .then() 无法正常工作,则可以将 .catch() 的调用提前,就像下面一样:
Promise 学习_回调函数_04

Promise.all()

​Promise.all()​​​ 方法会发起并行的 Promise 异步操作,等所有的异步操作全部结束之后才会执行下一步的 .then() 操作(等待机制)。示例代码:
Promise 学习_回调函数_05

Promise.race()

​Promise.race()​​​ 方法会发起并行的 Promise 异步操作,只要任何一个异步操作完成,就会立即执行下一步的 .then() 操作(赛跑机制)。示例代码如下:
Promise 学习_异步操作_06
先执行完之后,后边的都没了就,只有一个。

Promise 调用 resolve 和 reject 回调函数

Promise 异步操作的结果,可以调用 resolve 或 reject 回调函数进行处理,示例如下:
Promise 学习_异步操作_07

async/await

什么是 async/await

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

所以官方推出了​​async/await​

async/await 基本使用

使用 async/await 简化Promise异步操作的实例代码如下:
Promise 学习_异步操作_09
使用 await 修饰过后的返回值,不再是Promise实例,而是变成了调用成功的值,​​​如果方法中用到了 await,那么这个方法必须被 async 修饰​​。

async/await 使用的注意事项

  1. 如果在 function 中使用了 await, 那么这个 function 必须使用 async 修饰。
  2. 在 async方法中,第一个await 之前的代码会同步执行,await之后的代码会异步执行。
    Promise 学习_回调函数_10

结束了!

【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!

【重要说明】本文为本人的学习记录,论点和观点仅代表个人而不代表当时技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!

【Gitee地址】秦浩铖:​​https://gitee.com/wjw1014​