vue 中 Promise 使用方法 |
您所在的位置：网站首页 › vue的resolve方法 › vue 中 Promise 使用方法 |
vue 中 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) }) }返回结果为 调用 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 |
store.js的actions中添加increment方法。测试resolve的使用方法。
【本文地址】
今日新闻 |
推荐新闻 |