持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第10天,点击查看活动详情
自学前端
- 前文
- 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
- 介绍本次学习的是promise相关知识
- 这是基于我学习的笔记而来的文章
Promise 优缺点
有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。
Promise 也有一些缺点。首先,无法取消 Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
Promise三种状态
- 首先, 当我们开发中有异步操作时, 就可以给异步操作包装一个Promise
- 异步操作之后会有三种状态
- 我们一起来看一下这三种状态:
- pending: 等待状态, 比如正在进行网络请求, 或者定时器没有到事件
- fulfill: 满足状态, 当我们主动回调了resolve时, 就处于该状态, 并且会回调.then()
- reject: 拒绝状态, 当我们主动回调了reject时, 就处于该状态, 并且会回调.catch()
-
sync -> 同步
async -> 异步
onperation: 操作
Promise链式调用
- 我们在看Promise的流程图时, 发现无论是then还是catch都可以返回一个Promise对象
- 所以, 我们的代码其实是可以进行链式调用:
- 这里我们直接通过Promise包装了一下新的数据,将Proomise对象返回了
- Promise.resovle() : 将数据包装成Promise对象, 并且在内部回调resolve()函数
- Promise.reject() : 将数据包装成Promis对象, 并且在内部回调reject()函数
链式调用简写
- 简化版本代码:
- 如果我们希望数据直接包装成Promise.resolve, 那么子then中可以直接返回数据
- 注意下面的代码中, 我将return Promise.resovle(data)改成了return data
- 结果依然是一样的
后记
- 希望对对前端有兴趣的朋友们有帮助
- 这篇文章主要是关于promise的, 希望大家喜欢
- vue的作者是中国人尤雨溪, 非常厉害的人