当前位置: 代码网 > it编程>前端脚本>Vue.js > vue关于Promise的使用方式

vue关于Promise的使用方式

2024年07月02日 Vue.js 我要评论
promise基本概念promise是一个构造函数,所以可以 new 出一个promise的实例;在promise上有两个函数 resolve (成功之后的回调函数)和 reject (失败后的回调函

promise基本概念

promise是一个构造函数,所以可以 new 出一个promise的实例;

  • 在promise上有两个函数 resolve (成功之后的回调函数)和 reject (失败后的回调函数);
  • 在promise构造函数的prototype属性上,有一个 .then() 方法。

所以只要是promise构造函数创建的实例,都可以访问到 .then()方法;

  • promise表示一个一步操作,每当我们new一个promise的实例,这个实例就代表具体的 异步 操作
  • promise创建的实例,是一个异步操作,这个异步操作结果,

只有两种结果:

  • 状态1:异步执行 成功,需要在内部调用成功的回调函数resolve把结果返回给调用者
  • 状态2:异步执行 失败,需要在内部调用失败的回调函数reject把结果返回调用者

由于promise的实例是一个异步操作,所以内部拿到操作结果后,无法使用return把操作结果返回给调用者 ,

这个时候只能使用 回调函数 的形式,把成功或失败的结果,返回给调用者,

具体:

  • 我们可以在new出来的promise实例上,调用 .then()方法
  • 预先为这个promise异步操作,指定成功(resolve)和失败(reject)回调函数

使用实例

store.js的actions中添加increment方法。测试reject的使用方法。

 increment (context) {
      return new promise((resolve, reject) => {
        settimeout(() => {
          reject(new error('2222222'))
        }, 1000)
      })
    }

调用increment

 handleactiondecrease () {
      this.$store.dispatch('increment').then((data) => {
        console.log(data)
        console.log(this.$store.state.count)
      }).catch((error) => {
        console.log(error)
      })
    }

返回结果为

store.js的actions中添加increment方法。

测试resolve的使用方法。

increment ({ commit }) {
      return new promise((resolve, reject) => {
        settimeout(() => {
          resolve("1111")
        reject(new error('2222222'))
      }, 1000)
    })
    },

调用

 handleactiondecrease () {
      this.$store.dispatch('increment').then((data) => {
        console.log(data)
        console.log(this.$store.state.count)
      }).catch((error) => {
        console.log(error)
      })
    }

输出

总结

  • resolve —>对应then
  • reject —>对应catch

另外,只有调用了resolve 或者reject 才会触发 then 和 catch

以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com