Vuejs Promise

Vuejs Promise

• 参考：最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibili

目录

Vuejs Promise

什么是Promise呢

网络请求的回调地狱

定时器的异步事件

定时器异步事件解析

Promise三种状态

Promise链式调用

链式调用简写

什么是Promise呢

网络请求的回调地狱

定时器的异步事件

定时器异步事件解析

Promise三种状态

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

Promise链式调用

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

链式调用简写

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

 

• 注：Promise.all()的使用