前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue 中 Promise 使用方法

vue 中 Promise 使用方法

作者头像
全栈程序员站长
发布2022-07-02 16:04:28
9870
发布2022-07-02 16:04:28
举报

大家好,又见面了,我是你们的朋友全栈君。

1. 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)回调函数。

2.使用实例

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

代码语言:javascript
复制
 increment (context) { 
   
      return new Promise((resolve, reject) => { 
   
        setTimeout(() => { 
   
          reject(new Error('2222222'))
        }, 1000)
      })
    }

调用increment

代码语言:javascript
复制
 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的使用方法。

代码语言:javascript
复制
increment ({ 
    commit }) { 
   
      return new Promise((resolve, reject) => { 
   
        setTimeout(() => { 
   
          resolve("1111")
        reject(new Error('2222222'))
      }, 1000)
    })
    },

调用

代码语言:javascript
复制
 handleActionDecrease () { 
   
      this.$store.dispatch('increment').then((data) => { 
   
        console.log(data)
        console.log(this.$store.state.count)
      }).catch((error) => { 
   
        console.log(error)
      })
    }

输出

在这里插入图片描述
在这里插入图片描述

3、总结

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

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/148353.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. Promise 基本概念:
  • 2.使用实例
  • 3、总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档