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