vue 中 Promise 使用方法

vue 中 Promise 使用方法1.Promise基本概念:Promise是一个构造函数,所以可以new出一个Promise的实例;在Promise上有两个函数resolve(成功之后的回调函数)和reject(失败后的回调函数);在Promise构造函数的prototype属性上,有一个.then()方法。所以只要是Promise构造函数创建的实例,都可以访问到.then()方法;Promise表示一个一步操作,每当我们new一个Promise的实例,这个实例就代表具体的异步操作。Promise创建

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

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的使用方法。

 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)
      })
    }

输出

在这里插入图片描述

3、总结

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

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

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

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • JAX-RS 2.0如何验证查询参数

    JAX-RS 2.0如何验证查询参数

    2022年3月4日
  • oracle函数的调用应使用execute命令_matlab函数调用

    oracle函数的调用应使用execute命令_matlab函数调用调用Oracle函数,返回游标.

    2022年9月5日
  • spring 注解验证@NotNull等使用方法「建议收藏」

    spring 注解验证@NotNull等使用方法「建议收藏」常用标签@Null被注释的元素必须为null@NotNull被注释的元素不能为null@AssertTrue被注释的元素必须为true@AssertFalse被注释的元素必须为false@Min(value)被注释的元素必须是一个数字,其值必须大于等于指定的最小值@Max(value)被注释的元素必须是一个数字,其值必须小于等于指定的最大值@DecimalMin(

    2022年6月13日
  • lcd开机流程图_LCD1602程序代码及显示流程图

    lcd开机流程图_LCD1602程序代码及显示流程图描述lcd1602显示程序代码前些天弄了最小系统板后就想着学习1602的显示程序,可惜坛子里的或网上的,都没有简单的1602显示程序,无柰在网上下载了一段经过反复修改测试,终于有了下面一段代码://————————————————//-…

    2022年7月16日
  • openssl-heartbleed漏洞学习

    openssl-heartbleed漏洞学习了解漏洞Heartbleed漏洞:Heartbleed漏洞是openssl的一个漏洞,这个严重漏洞(CVE-2014-0160)的产生是由于未能在memcpy()调用受害用户输入内容作为长度参数之前正确进行边界检查。攻击者可以追踪OpenSSL所分配的64KB缓存、将超出必要范围的字节信息复制到缓存当中再返回缓存内容,这样一来受害者的内存内容就会以每次64KB的速度进行泄露。背景和影响:…

    2022年7月25日
  • 服务器系统装显卡驱动,windows2019服务器系统安装显卡驱动(A卡篇)

    服务器系统装显卡驱动,windows2019服务器系统安装显卡驱动(A卡篇)原创:张荣国今天捣腾一台旧电脑安装windows2019服务器系统,测网站等。安装windows2019倒是没什么难度。本来想着服务器系统,也不用理它驱动了,毕竟基本驱动它会自己装上。但后来接显示器时,分辨率只有1024,而且显示器是宽频的,这样的分辨率图标都变形了,越看越觉得难受,索性想着帮它装个显卡驱动吧,来个正确分辨率就好了。可是网上找了一圈,服务器系统的显卡驱动就没有。想想也是,服务器毕竟…

    2022年9月27日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号