Promise解决回调嵌套问题及终极解决方案async 和 await

一、promise

1.异步函数 与 回调函数的说明

回调函数:

  1. 把一个函数当成参数传递, 将来特定的时机调用, 这个函数就叫回调函数
  2. 什么时候会用到回调函数, 异步的时候 延时器 setTimeout Ajax (传入函数, 作为回调, 将来在特定时机调用)

[crayon-5f95db412e99c255840994/]

回调函数的问题:

  1. 回调函数的阅读性不好, 回调不会立马执行
  2. 回调函数如果大量的嵌套, 可维护性差 (回调地狱)

promise 就是为了解决回调函数嵌套的问题而存在的

2.promise 的基本语法

目的: promise是书写异步代码的另一种方式, 解决回调函数嵌套的问题
1.如何创建一个 promise 对象

2.如何使用一个promise 对象

案例:

例如:创建一个读写文件的promise对象

使用读写文件的promise对象

3.promise 解决回调地狱的问题

如果有多个 promise 需要依次处理, 支持链式编程.then(),前提条件:前一个promise必须返回(return)一个promise对象

案例:按照顺序依次读取 a, b, c 三个文件
回调地狱: 回调函数嵌套回调函数, 嵌套多了, 将来就很难维护, 很难理清顺序

promise 解决回调地狱的问题优化 :
将读取文件创建promise的过程封装起来,将来一调用函数,就可以创建promise对象

二、asyncawait

虽然promise解决了嵌套回调的可维护问题,但是可读性并没有那么高,因此终极解决方案async和await来了
asyncawait,优化了promise的写法,让代码更加可维护了

1.async和await的特性

1.asyncawait是一对关键字,成对出现才有效
2.async用于修饰一个函数,表示一个函数是异步的(遇到await之前的内容,还是同步的)
3.await用于等待一个成功的结果,只能用在async函数中
4.await后面一般会跟一个promise对象await会阻塞async函数的执行,直到等到promise成功的结果(resolve的结果
5.await只会等待promise成功的结果,如果失败了会报错,需要使用try catch包裹

2.优化上方promise读取 a, b, c 三个文件

3.代码对比

普通函数

使用async和await

4.错误捕获try catch

5.删除操作提示对比


拓展:element表格删除操作页码问题

element 表格搜索,如果页码出现大量变换,一般重置第一页开始展示

element 分页,切换一页显示条数方法,如果页码出现大量变换,一般重置第一页开始展示

element表格添加操作页码问题

未经允许不得转载:一点博客-青梅煮码-共享博客 » Promise解决回调嵌套问题及终极解决方案async 和 await
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏