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對象，從而實現更加完善的異步編程。