脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue使用Promise方式

vue关于Promise的使用方式

 更新时间：2024年06月18日 09:09:25   作者：曾令胜  
这篇文章主要介绍了vue关于Promise的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue echarts封装组件需求分析与实现

    Vue echarts封装组件需求分析与实现

    在平常的项目中,echarts图表我们也是使用的非常多的,通常我们从后端拿到数据,需要在图表上动态的进行呈现,接下来我们就模拟从后端获取数据然后进行呈现的方法，这篇文章主要介绍了Vue echarts封装组件需求分析与实现
    2022-10-10
  • vue打包后生成一个配置文件可以修改IP

    vue打包后生成一个配置文件可以修改IP

    本文主要介绍了修改Vue项目运行的IP和端口，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • VUE render函数使用和详解

    VUE render函数使用和详解

    这篇文章主要为大家介绍了VUE render函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12
  • Vue实现侧边菜单栏手风琴效果实例代码

    Vue实现侧边菜单栏手风琴效果实例代码

    本文通过一段简单的代码给大家介绍了基于纯vue实现侧边菜单栏手风琴效果，代码很简单，感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-05-05
  • element table多层嵌套显示的实践

    element table多层嵌套显示的实践

    本文主要介绍了element table多层嵌套显示的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Element中select多数据加载优化的实现

    Element中select多数据加载优化的实现

    本文主要介绍了Element中select多数据加载优化的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 用vue3封装一个符合思维且简单实用的弹出层

    用vue3封装一个符合思维且简单实用的弹出层

    最近新项目中需要一个弹窗组件,所以我就做了一个,下面这篇文章主要给大家介绍了关于如何利用vue3封装一个符合思维且简单实用的弹出层,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • Vue.js第一天学习笔记（数据的双向绑定、常用指令）

    Vue.js第一天学习笔记（数据的双向绑定、常用指令）

    这篇文章主要为大家分享了Vue.js第一天的学习笔记，包括数据的双向绑定、常用指令学习,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue 的 Render 函数

    vue 的 Render 函数

    Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。下面就和小编一起来学习下面文章内容吧
    2021-09-09
  • vue2.0+webpack环境的构造过程

    vue2.0+webpack环境的构造过程

    本文分步骤给大家介绍了vue2.0+webpack环境的构造过程的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-11-11

最新评论