小白学习vuejs-16-promise续章

111 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第10天,点击查看活动详情

自学前端

  • 前文
    • 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
    • 介绍本次学习的是promise相关知识
    • 这是基于我学习的笔记而来的文章

Promise 优缺点

有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。

Promise 也有一些缺点。首先,无法取消 Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

Promise三种状态

Promise3.png

  • 首先, 当我们开发中有异步操作时, 就可以给异步操作包装一个Promise
    • 异步操作之后会有三种状态
  • 我们一起来看一下这三种状态:
    • pending: 等待状态, 比如正在进行网络请求, 或者定时器没有到事件
    • fulfill: 满足状态, 当我们主动回调了resolve时, 就处于该状态, 并且会回调.then()
    • reject: 拒绝状态, 当我们主动回调了reject时, 就处于该状态, 并且会回调.catch()
    • sync -> 同步

      async -> 异步

      onperation: 操作

Promise链式调用

promise链式调用.png

  • 我们在看Promise的流程图时, 发现无论是then还是catch都可以返回一个Promise对象
  • 所以, 我们的代码其实是可以进行链式调用:
  • 这里我们直接通过Promise包装了一下新的数据,将Proomise对象返回了
    • Promise.resovle() : 将数据包装成Promise对象, 并且在内部回调resolve()函数
    • Promise.reject() : 将数据包装成Promis对象, 并且在内部回调reject()函数

链式调用简写

  • 简化版本代码:
    • 如果我们希望数据直接包装成Promise.resolve, 那么子then中可以直接返回数据
    • 注意下面的代码中, 我将return Promise.resovle(data)改成了return data
    • 结果依然是一样的

p1.png

p2.png

p3.png

p4.png

后记

  • 希望对对前端有兴趣的朋友们有帮助
  • 这篇文章主要是关于promise的, 希望大家喜欢
  • vue的作者是中国人尤雨溪, 非常厉害的人