获取异步请求的结果 | JS | VUEX | axios

这里都是获取异步axios的请求结果

一、async/await的方式(获取一个vuex中的异步请求的结果)

1、在vuex(store中的index.js)中定义异步函数

1> 在mutation里定义同步函数,(用来自异步请求的结果)更新state中的值

mutations: {
    getDbws (state, dbws) {
      // 引用state和异步的结果dbws
      // 修改state里面的值 => state.xx=''
      }
    }
  }

2> 在action里定义async异步函数,进行axios请求,在返回结果中commit定义在mutation中的函数

actions: {
    async getDb (ctx) {
      await axios.get('url')
        .then((response) => {
          ctx.commit('getDbws', response.data.data)
        }).catch((err) => {
          alert(err)
        })
    }
  }
// 利用传入的context(ctx)作为载体传递参数,而不是直接传给state
// 在action里调用异步请求,使用commit来获取mutation里的方法,更新state

2、在组件xx.vue中定义异步函数,用来调用vuex中的异步函数,获取返回值并更新组件中的值

1> 在methods中定义异步函数

getInit: async function () {
      // 用dispatc启动命名在action中的异步函数
      // 这个请求之前加 await,这样之后的句子就运行在上一步获取结果之后
      await this.$store.dispatch('getDb')
      // 用vuex中的异步结果更新组件中的值
      this.wsNames = this.$store.state.wsNames
    }

2> 在created生命周期函数中运行这个函数

 created: function () {
    this.getInit()
  }

二、promise.all()的方式(获取多个异步请求的结果)

const Pm = new Promise((resolve, reject) => {
   if () {axios.put(wmsurl + this.wsName, wmss).then((resolve('promisem')))}
else { resolve('no promisem') } //满足条件就在if块内获取调用异步请求,并在.then中处理resolve //不满足条件就直接在else中返回resolve。若不进行任何请求便不返回resolve,那promise.all()便永远都不能执行 }) const Pf = new Promise((resolve, reject) => { }) Promise.all([Pm, Pf]).then((res) => { // 获取到两个resolve结果后,也就是Pm,Pf这两个异步都执行完后,在promise.all()中进行下一步操作 ......})
原文地址:https://www.cnblogs.com/guoguocode/p/13632340.html