Vue Promise的使用介绍

一、Promise的基本介绍

Promise是ES6引入的新特性，用于异步编程解决回调地狱问题，它表示某个未来才会结束的事件（通常是一个异步操作）的结果。

Promise类似于一个容器，能够将异步请求包装起来，从而可以使用catch和then方法进行链式操作。

then方法可以接收一个回调函数，当操作成功时，将会调用该回调函数，回调函数的参数即为异步请求返回的参数。

//创建Promise对象
let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve('done!'), 1000);
});

//使用then方法对异步请求进行链式操作
promise.then(
  result => alert(result), // 输出 "done!" 
  error => alert(error) // 没有error
);

二、Vue Promise的使用介绍

在Vue中，我们可以使用该框架提供的Vue Promise来简化异步请求的操作。

Vue Promise是对ES6 Promise的封装，Vue将Promise的then方法封装成了Vue.prototype.$nextTick方法，从而可以在异步请求中方便的进行链式操作。

//使用Vue Promise进行异步请求
this.$http.get(url).then(
  response => {
    //操作成功
  },
  error => {
    //操作失败
  }
);

三、Promise的常见操作

1、Promise.all()方法

Promise.all()方法可以将多个Promise对象组合起来，当所有Promise对象都成功时，才会触发.then()方法；当任意一个Promise对象出错时，会触发.catch()方法。

let promise1 = Promise.resolve(1);
let promise2 = Promise.resolve(2);
let promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then(function (values) {
    console.log(values); // [1, 2, 3]
  });

2、Promise.race()方法

Promise.race()方法可以将多个Promise对象包装成一个新的Promise实例，只有最先执行完的Promise对象的结果，才会传给.then方法。

let promise1 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 500, 'one');
});

let promise2 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2])
.then(function(value) {
  console.log(value); // "two"
});

3、Promise.reject()方法

Promise.reject()方法用于返回一个rejected的Promise对象，并且默认的错误信息可以被.catch()方法捕获到。

Promise.reject('出错了')
.catch(function(e) {
  console.log(e); // "出错了"
});

4、Promise.resolve()方法

Promise.resolve()方法用于返回一个resolved的Promise对象。

Promise.resolve(1)
.then(function(value) {
  console.log(value); // 1
});

四、Vue Promise的使用场景

1、Ajax请求

在Vue中，我们可以使用Vue Resource或axios等第三方库发送Ajax请求，通常情况下，我们会将异步请求封装成方法，将请求结果传递给Promise对象，并使用then方法进行链式操作。

export default {
  methods: {
    fetchUserInfo () {
      return new Promise((resolve, reject) => {
        this.$http.get('/api/user').then(response => {
          resolve(response)
        }, error => {
          reject(error)
        })
      })
    }
  },
  created () {
    this.fetchUserInfo().then(response => {
      console.log(response)
    }).catch(error => {
      console.log(error)
    })
  }
}

2、动态加载组件

在Vue中，我们可以通过异步加载组件动态管理应用的资源。通常情况下，我们会将异步加载组件的方法封装成Promise对象，并在需要加载组件的地方使用.then方法进行操作。

const Home = resolve => {
  require.ensure(['./components/Home.vue'], () => {
    resolve(require('./components/Home.vue'))
  })
}

const About = resolve => {
  require.ensure(['./components/About.vue'], () => {
    resolve(require('./components/About.vue'))
  })
}

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

3、响应用户事件

在Vue中，我们可以使用Promise对象来响应用户事件。正常情况下，我们会将用户事件封装成Promise对象，通过then方法进行操作。

 methods: {
   showDialog () {
     return new Promise((resolve, reject) => {
       this.$modal.show('dialog', {
         title: 'Confirmation Dialog',
         message: 'Are you sure you want to proceed?',
         buttons: [
           { title: 'Cancel', handler: reject },
           { title: 'Proceed', handler: resolve, default: true }
         ]
       })
     })
   }
 },

 async created () {
   try {
     await this.showDialog()
     console.log('User clicked Proceed!')
   } catch (error) {
     console.log('User clicked Cancel!')
   }
 }

总结

Vue Promise是Vue框架对ES6 Promise的封装，可以方便地进行异步操作。我们可以使用Promise的then方法进行链式操作，也可以使用Promise.all()，Promise.race()等方法进行多个异步请求的处理。在Vue中，我们可以将Ajax请求、动态加载组件以及响应用户事件等封装成Promise对象，从而实现更加完善的异步编程。