ES6——Promise使用经验（es6-promise）

ES6中，promise是经常使用的对象。

通过promise实例，可以实现对异步代码的封装，保证当异步代码执行完成后再执行后续处理代码。

Promise的基本使用

resolve函数的结果可以通过then()方法接收，reject函数的结果可以被catch()方法接收

1. 
   
2. valid(){
3. return new Promise((resolve,reject)=>{
4. if(this.flag){
5. return resolve(true)
6. }
7. this.$refs.form.validate((valid) => {
8. if(valid){
9. resolve(valid)
10. }
11. else{
12. reject(valid);
13. }
14. })
15. })
16. }

因为element-ui中的表单自带validate操作是异步操作，所以我将校验方法封装在Promise实例中，当校验过程结束后调用then方法就可以执行后续的操作。

当promise对象实例化的时候，就会执行promise内部的代码。

注意，promise实例只能保证其内部的异步操作执行完成后，再被then或者catch方法捕捉。

如下所示。

1. 
   
2. let valid = this.valid();
3. console.log("第一步")
4. valid.then((value)=>{
6. console.log("第三步")
8. console.log("校验完成,校验结果无误")
10. }).catch((error)=>{
12. console.log("校验校验完成,校验结果有误")
14. })
15. console.log("第二步")

Promise.all()和Promise.race()

all和race方法，都是接收一个promise实例数组。

all方法是按照数组中的顺序进行执行promise操作，race方法并不能确定。

区别在于，all方法是当所有的promise执行完成后才会进入then或者有一个rejcet后进入catch；而race方法是由第一个promise完成的状态来决定。

race方法，个人用的比较少，不做多的分享。

all方法，虽然是按照数组中的promise实例的顺序来执行，但是并不能保证哪个promise先执行完成，所有在必须有先后完成顺序时，建议不要使用all方法

Promise.resolve()和Promise.reject()

这两个相当于是实例化promise的一种简约写法

1. 
   
2. export const fetch = (url) => {
3. return Vue.axios({
4. method: 'get',
5. url: url,
6. }).then(function(response) {
7. return Promise.resolve(response.data);
8. }).catch((error) => {
9. if(error.response.status===302){
10. router.push('/login')
11. return Promise.reject("登录失效，请重新登录");
12. }else{
13. return Promise.reject(error.statusText);
14. }
15. });
16. }

他可以将数据或者方法进行Promsie转换，使他成为promise的一个实例，能被对应的.then和.catch捕获