Promise对象(超详细)

Promise是异步编程的一种解决方案,比回调函数和事件更合理且更强大。可以理解为一个容器,里面保存着某个未来才会结束的事件的结果

特点:

  • Promise对象有三种状态:pending(进行中)、fulfilled(已成功)、rejected(已失败),该状态不受外界影响。
  • 状态可以从pending变为fulfilled,或者从pending变为rejected。一旦状态改变,就不会再变。

缺点:

  • Promise一旦新建它就会立即执行,无法中途取消
  • 如果不设置回调函数,Promise内部抛出的错误,不会反应到外部
  • 当处于pending状态时,无法得知目前的进展是刚开始还是即将完成

基本用法:

ES6规定,Promise对象是一个构造函数,用来生成Promise实例,它接受一个函数作为参数,该函数的两个函数参数分别是resolve和reject ,resolve的作用是将Promise对象的状态从未完成变为成功,reject函数的作用是将Promise对象的状态从未完成变为失败

then()

Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数(一般都只用resolved状态,reject状态交由catch专门处理)

注意:Promise新建后就会立即执行,但是then方法是微任务,将在当前脚本所有同步任务执行完才会执行。如下代码:首先输出的是A。然后才是then方法指定的回调函数,所以B最后输出。

then方法返回的是一个新的Promise实例(不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。

catch()

用于检验错误,catch()方法返回的也是一个Promise对象,因此后面还可以接着调用then()方法,如果没有报错,则会跳过catch()方法,要是后面的then()方法里面报错,就与前面的catch()无关了

finally()

用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法总是会返回原来的值,并且不接受任何参数,这意味着没有办法知道前面的 Promise状态到底是fulfilled还是rejected。

all()、race()、allsettled()、any()

都是接收一个 Promise 对象数组,返回一个新的 Promise 对象。区别如下:

Promise.all() 方法:

  • 所有 Promise 对象都 fulfilled 后返回结果,只要有一个 Promise 被 rejected,返回的 Promise 对象就会被立即 rejected。
  • 如果传递给 Promise.all() 的数组中有非 Promise 对象(比如普通值),则它们会被视为已经 fulfilled 状态的 Promise。
  • 返回的 Promise 对象的结果数组中的元素顺序与原始数组的顺序保持一致。

Promise.allSettled() 方法:

  • 所有 Promise 对象都 settled后返回结果,不管是 fulfilled 还是 rejected,返回的 Promise 对象都会被 fulfilled。
  • 返回的 Promise 对象的结果数组中的元素顺序与原始数组的顺序保持一致。

Promise.race() 方法:

  • 任意一个 Promise 对象 settled 后返回结果,不管是 fulfilled 还是 rejected返回的。
  • 返回的 Promise 对象的结果由第一个 settled 的 Promise 对象决定。

Promise.any() 方法:

  • 任意一个 Promise 对象 fulfilled 后被 fulfilled。返回的 Promise 对象的结果是第一个 fulfilled 的 Promise 对象的结果。
  • 如果所有的 Promise 对象都被 rejected,则返回的 Promise 对象将被立即 rejected。
  • 如果传递给 Promise.any() 的数组为空,则返回的 Promise 对象会立即被 rejected。

resolve(value)、reject(reason)

用于改变 Promise 对象的状态,都只能在 Promise 构造函数内部使用。区别如下:

resolve(value):

将 Promise 对象标记为 fulfilled(已完成)状态,并将给定的值作为结果传递给后续的 .then() 方法。参数value 是要传递给后续 .then() 方法的值。

reject(reason):

将 Promise 对象标记为 rejected(已拒绝)状态,并将给定的原因作为错误传递给后续的 .catch() 或带有拒绝处理程序的 .then() 方法。参数reason 是一个用于描述拒绝原因的值。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
在Vue中,如果你在模板中直接使用一个Promise对象,它会被解析为字符串"[object Promise]",因为Vue默认不能直接在模板中渲染Promise对象。 要解决这个问题,可以使用Vue的计算属性(computed property)或者异步组件(async components)。 如果你使用计算属性,你可以在计算属性中返回Promise对象,然后在模板中使用该计算属性。例如: ``` <template> <div>{{ promiseValue }}</div> </template> <script> export default { data() { return { promise: new Promise(resolve => setTimeout(() => resolve('Hello World!'), 1000)) } }, computed: { promiseValue() { return this.promise.then(value => value) } } } </script> ``` 如果你使用异步组件,你可以在异步组件的回调函数中返回Promise对象,然后在父组件中使用该异步组件。例如: ``` <template> <div> <async-component :promise="promise"></async-component> </div> </template> <script> export default { data() { return { promise: new Promise(resolve => setTimeout(() => resolve('Hello World!'), 1000)) } }, components: { 'async-component': () => ({ component: import('./AsyncComponent.vue'), loading: { template: 'Loading...' }, error: { template: 'Error!' } }) } } </script> ``` 在异步组件中,你可以在模板中使用`<template>`, `<script>`, `<style>`等标签来定义异步组件的内容。在这个例子中,我定义了一个异步组件`AsyncComponent.vue`,当Promise对象成功时,异步组件会渲染一个包含Promise对象的值的字符串,否则会显示loading或error信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

rinba_murphy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值