Vue生命周期内发起ajax请求,因为请求异步性,并且生命周期函数也是异步的,导致子组件获取结果滞后,如果才能保证同步?

1、项目有这样的需求、或者是设计吧。项目在浏览器一打开,初始化时需要向服务端发起请求,获取初始化参数,而这些参数需要在所有的子模块(组件)中需要用到。
2、现在的实现思路是在main.js中,在created钩子函数发起请求,将结果存放在vuex中用于各个模块共享。其他子模块在mounted钩子函数中拿取vuex中的参数,再进行其他处理。各个模块通过路由链接。但是因为axios请求的异步性,导致子组件开始mounted时,之前的请求结果还没返回。
3、后来在试着在main.js的created钩子函数中使用await async promise等机制来保证同步,后来还是不行,await async 不能阻塞vue生命周期钩子函数的执行。这就导致获取数据一直滞后。
4、有大神能提供解决方法嘛?或者我的思路有问题?

5、main.js:

new Vue({
    render: h => h(App),
    store: store,
    methods: {
        async seturl() {

        },
        get() {
            var _this = this;
            return new Promise((resolve) => {
                _this.$axios.get(require.systemInfo).then(function (response) {
                    resolve(response.data)
                }).catch(function (err) {

                })
            })
        },
        b() {
            window.console.log("处理后面的函数!")
        }
    },

    async created () {

        window.console.log("开始发送请求!")
        var v = await this.get();
        window.console.log(v)
        this.$store.commit('setUrls', v);
        this.b();

        /*this.iserverUrl = this.$store.state.AppInformation.urls.iserver;*/
    }
}).$mount('#app')



阅读 8.9k
5 个回答

大致 思路不变。首先你在main里面通过异步获取了初始参数。但是由于异步的不确定性,导致在子组件中没有办法在mounted的时候,正确的获取到数据。
那么是否可以在子组建中使用watch 来监听 vuex中初始数据呢。如果watch到了数据变化,且是正确的数据,这个时候在执行相应的函数,是不是就可以了。

有个野路子,就是在 beforeRouteEnter 中请求数据,然后绑到全局上,之后各模块从全局中取数据;
如果只用vuex的话,感觉要在action层写请求,然后更新state,取数据的时候可能得用getter(这只是推论,没实际用过)

直接写在路由守卫里面,请求不返回或者报错就跳登录

https://github.com/chunpu/min...

可以参考这个思路,我觉得挺好的,相当于给全局一个开关,开关开之前(全局拿到数据前)子页面的调用会推到一个队列里,等到全局拿到数据后依次执行

新手上路,请多包涵

子组件用v-if控制,父组件请求到数据把子组件v-if置为true

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏