vue關(guān)于Promise的使用方式

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

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

Promise基本概念

Promise是一個構(gòu)造函數(shù)，所以可以 new 出一個Promise的實例；

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

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

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

只有兩種結(jié)果：

狀態(tài)1：異步執(zhí)行成功，需要在內(nèi)部調(diào)用成功的回調(diào)函數(shù)resolve把結(jié)果返回給調(diào)用者
狀態(tài)2：異步執(zhí)行失敗，需要在內(nèi)部調(diào)用失敗的回調(diào)函數(shù)reject把結(jié)果返回調(diào)用者

由于Promise的實例是一個異步操作，所以內(nèi)部拿到操作結(jié)果后，無法使用return把操作結(jié)果返回給調(diào)用者，

這個時候只能使用回調(diào)函數(shù) 的形式，把成功或失敗的結(jié)果，返回給調(diào)用者，

具體：

我們可以在new出來的Promise實例上，調(diào)用 .then()方法
預(yù)先為這個Promise異步操作，指定成功(resolve)和失敗(reject)回調(diào)函數(shù)

使用實例

store.js的actions中添加increment方法。測試reject的使用方法。

 increment (context) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject(new Error('2222222'))
        }, 1000)
      })
    }

調(diào)用increment

 handleActionDecrease () {
      this.$store.dispatch('increment').then((data) => {
        console.log(data)
        console.log(this.$store.state.count)
      }).catch((error) => {
        console.log(error)
      })
    }

返回結(jié)果為

store.js的actions中添加increment方法。

測試resolve的使用方法。

increment ({ commit }) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("1111")
        reject(new Error('2222222'))
      }, 1000)
    })
    },

調(diào)用

 handleActionDecrease () {
      this.$store.dispatch('increment').then((data) => {
        console.log(data)
        console.log(this.$store.state.count)
      }).catch((error) => {
        console.log(error)
      })
    }

輸出