获取异步请求的结果 | 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()中进行下一步操作
......})