vue關于Promise的使用方式

更新時間：2024年06月18日 09:09:25 作者：曾令勝

這篇文章主要介紹了vue關于Promise的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Promise基本概念

Promise是一個構造函數，所以可以 new 出一個Promise的實例；

在Promise上有兩個函數 resolve (成功之后的回調函數)和 reject (失敗后的回調函數)；
在Promise構造函數的prototype屬性上，有一個 .then() 方法。

所以只要是Promise構造函數創(chuàng)建的實例，都可以訪問到 .then()方法；

Promise表示一個一步操作，每當我們new一個Promise的實例，這個實例就代表具體的 異步操作。
Promise創(chuàng)建的實例，是一個異步操作，這個異步操作結果，

只有兩種結果：

狀態(tài)1：異步執(zhí)行成功，需要在內部調用成功的回調函數resolve把結果返回給調用者
狀態(tài)2：異步執(zhí)行失敗，需要在內部調用失敗的回調函數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)
      })
    }

輸出