Vue2 如何异步加载数据？

Question

我需要在模板编译前进行２次异步操作。

methods: {
      getResults(){
        return new Promise(resolve => {
          if (this.$store.state.results) {
            this.results = this.$store.state.results
            resolve()
          }
          else {
            const q = this.$route.query.q
            this.$http.get('search/', {params: {q: q}}).then(response => {
              this.$store.commit('postResults', {results: response.data.results, count: response.data.count})
              resolve()
            })
          }
        })
      },
      getDetail(){
          return this.$http('vendor/detail/',{params:{
              doc:id
          }})
      }
    },
beforeMount(){
    this.getResults().then(this.getDetail).then((response)=>{
       this.detail=response
     })
  },

现在的情况是，getDetail执行完后模板就开始编译了。。求大神解答:(

Answer 1

编译过程是同步的，请求过程是异步的，但是请求的数据会同步到界面，有问题？

你这里适合用vuex或者一个状态管理模块，数据保存在store，action用于发送异步请求，在组件层只需要关注我要什么数据，不需要关注这个请求过程

1.我先说为什么getdetail直接跑，因为new Promise的回调就是立即执行完成的，他不知道get 是否完成，$http发的请求本身就是一个promise，所以你不需要new promise，直接返回。

getResults() {
    return this.$http.get(...)
}

这样getResults才可以直接使用then方法，而且这个方法是在get成功之后执行的。

1. 从store里取数据赋值给组件，不是这样写的，用vuex的mapGetter

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getters 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

1. 用vuex的话，ajax请求是在 action里发的，actions里写好需要发送的请求，然后调用mutation把获取的数据放进state，然后你那边mapGetter拿到的数据自动更新，你就不用管了。
   你想在组件里发送请求，直接调用 thia.$dispatch,去调用相应的actions，也不用处理回调什么乱七八糟的。

Answer 2

这里是模板
li(v-for="result,idx in results" ,:key='result')
 span {{result.name}}                 
 span {{details[idx].id}}

在这里加载数据
 beforeMount(){
      const searchInfo = this.getSearchInfo()
      this.$store.dispatch('getSearchResults', searchInfo).then(()=>this.$store.dispatch('getSearchDetail'))
    }

这里是action
   getSearchDetail({ state, commit }) {
      const arr = state.results.map(result => axios.get('vendor/detail/', {
        params: {
          doc: result.doc.id,
        },
      }))
      return Promise.all(arr).then((response) => {
        const details = response.map(detail => detail.data)
        commit('postDetails', { details })
      })
    },

这样做的结果是vue.common.js?e881:433 TypeError: Cannot read property 'id' of undefined(…)

但是我发现，如果我把模板的这里

h3(:class='$style.business') {{details[idx].id}}

改为

h3(:class='$style.business') {{details[idx]}}

这样做页面可以顺利渲染

有点不解，希望能解答.. 谢谢

---

问题应该在这:

v-for依赖的是第一次异步的结果results,但是模板却需要渲染第二次异步才能获取到detail..

---

我是这么搞的:

li(v-for="result,idx in results" ,:key='result')
 span {{result.name}}              
 span(v-if='details') {{details[idx].id}}

有点不优雅，但是解决了。有优雅的解决方案吗