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

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

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

Promise基本概念

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

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

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

Promise表示一個(gè)一步操作，每當(dāng)我們new一個(gè)Promise的實(shí)例，這個(gè)實(shí)例就代表具體的 異步操作。
Promise創(chuàng)建的實(shí)例，是一個(gè)異步操作，這個(gè)異步操作結(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的實(shí)例是一個(gè)異步操作，所以內(nèi)部拿到操作結(jié)果后，無(wú)法使用return把操作結(jié)果返回給調(diào)用者，

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

具體：

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

使用實(shí)例

store.js的actions中添加increment方法。測(cè)試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方法。

測(cè)試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)
      })
    }

輸出