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
以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。
发表评论