页面刷新的同步问题（十一）2021-07-23

在测试的时候发现初始化问题并不能解决页面刷新的同步问题

问题描述：在测试时发现，在请求数据之后echarts图表显示的数据是上一次从服务器请求到的数据，本来是用js的sleep函数进行等待，以等待数据请求完成后再开始绘制图表，但是发现无论等待时间设置的多长，js的线性执行都不能使后一个函数在前一个函数的请求全部完成之后进行，在查阅了vuex的相关文档之后，找到了同步问题的解决方案

参考的文章链接：vue异步问题

在数据请求函数内部返回promise，下面以请求K线数据为例，

在diagram.vue组件中的loadData()函数中

 loadData(){
              //使用 vuex store 发出post请求
              var type=this.$store.state.typeOfDiagram
              console.log("searching stocks which code is"+this.$store.state.currentCode)
              if(type==1) {
                  this.$store.dispatch('search_stocks_K', {ts_code: this.$store.state.currentCode}).then(()=>{
                      this.echartsDisplay(type)
                  })
              }
              if(type==2) {
                  this.$store.dispatch('reset_real_predict2', {ts_code: this.$store.state.currentCode}).then(()=>{
                      this.echartsDisplay(type)
                  })
              }
              if(type==3) {
                  this.$store.dispatch('reset_real_predict', {ts_code: this.$store.state.currentCode}).then(()=>{
                      this.echartsDisplay(type)
                  })
              }


          }

在执行请求数据的dispatch后面，以.then()函数确保后一个绘制函数在整个dispatch请求完成之后进行

在store中的 action函数中

    search_stocks_K (context, value) {
        return new Promise((resolve,reject)=> {
            axios({
                method: 'post',
                url: 'http://127.0.0.1:8000/api/search_stock_K',
                data: qs.stringify({
                    ts_code:value.ts_code
                })
            })
                .then(function (res) {
                    context.commit('muta_stocks_K', res.data.cookedData)
                    resolve()
                })
                .catch(function (err) {
                    console.log(err);
                });
        })

    },

函数改为return Promise类型，并且在commit请求结束之后通过resolve()返回，此时便可以解决图表刷新的异步问题。