将 axios 响应中的变量插入导出的 const答案

【问题标题】：Insert variables from axios response into exported const将 axios 响应中的变量插入导出的 const
【发布时间】：2020-12-02 21:43:19
【问题描述】：

我在我的 vue.js 项目中使用 axios 来执行 HTTP POST 并为 vue-echart 收集一些变量。我正在尝试找出最好的方法来做到这一点，但在某种程度上遇到了障碍。

这就是我的dashboard.vue 文件中的内容：

<script>

import { echartBar, echartPie } from "@/data/echarts";

import { echart1, echart2, echart3 } from "@/data/dashboard1";

export default {
  metaInfo: {
    title: "Dashboard v1"
  },
  mounted () {
    axios
      .post('https://testsite.com', 'Request data here')
      .then(response => {
        this.dataNeeded = response.data
        console.log(info)
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
  },
  data() {
    return {
      echartBar,
      echartPie,
      echart1,
      echart2,
      echart3,
    };
  }
};
</script>
<style>
.echarts {
  width: 100%;
  height: 100%;
}
</style>

然后，这是从 echarts.js 导出的 const：

var dark_heading = "#c2c6dc";
var chartLabels = ['Test1', 'Test2']

import { zoomBarData } from '@/data/echartSeries'

// start::echartBar
export const echartBar = {
        legend: {
            borderRadius: 0,
            orient: 'horizontal',
            x: 'right',
            data: chartLabels
        },
        grid: {
            left: '8px',
            right: '8px',
            bottom: '0',
            containLabel: true
        },
        tooltip: {
            show: true,
            
            backgroundColor: 'rgba(0, 0, 0, .8)'
        },
        
        xAxis: [{
            type: 'category',
          
            data: dataNeeded.months,
            axisTick: {
                alignWithLabel: true,
               
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                color: dark_heading,
            },
            axisLine: {
                show:true,
                color: dark_heading,
                
                lineStyle: {
                color: dark_heading,
                
                }
            }
        }],
        yAxis: [{
          type: 'value',
          
        
          axisLabel: {
            color: dark_heading, 
            formatter: '${value}'
        },
        axisLine: {
            show:false,
            color: dark_heading,
            
            lineStyle: {
            color: dark_heading,
            
            }
        },
          min: 0,
          max: 100000,
          interval: 25000,
      
          splitLine: {
              show: true,
              interval: 'auto'
          }
      }],
 

  series: [{
          name: chartLabels[0],
          data: dataNeeded.amounts,
          label: { show: false, color: '#0168c1' },
          type: 'bar',
          barGap: 0,
          color: '#bcbbdd',
          smooth: true,
          itemStyle: {
              emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowOffsetY: -2,
                  shadowColor: 'rgba(0, 0, 0, 0.3)'
              }
          }
      },
      {
          name: chartLabels[1],
          data: dataNeeded.amounts2,
          label: { show: false, color: '#639' },
          type: 'bar',
          color: '#7569b3',
          smooth: true,
          itemStyle: {
              emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowOffsetY: -2,
                  shadowColor: 'rgba(0, 0, 0, 0.3)'
              }
          }
      }

  ]
}

基本上，如果我想使用从 axios 请求 (JSON) 中返回的数据来代替 echarts.js 中列出的数据（作为导出的常量），我最好的选择是什么？

【问题讨论】：

这能回答你的问题吗？ How do I return the response from an asynchronous call?
我不是最大的 HTTP 动词坚持者，但为什么要使用 POST 请求获取数据？
我认为这不能回答我的问题 - 似乎与我正在寻找的有点不同。我有一个从不同文件导出的常量，该文件被导入到具有 axios 请求的同一页面中。从这里开始，我需要将一些响应变量放入导入的 const 中。端点需要一个返回一些信息的 POST。如果我没有多大意义，请道歉。
const 基本上是返回一个普通对象。 Axios 很可能也会收到这样的对象。那么您是否尝试将您的 echartBar 变量设置为 axios 响应，例如 this.echartBar = response？
@MaartenVeerman，OP 可能想要的是 this.echartBar = response.data，尽管您可能需要更深入，具体取决于响应的结构。

标签： javascript vue.js axios

【解决方案1】：

const 基本上是返回一个普通对象。 Axios 将接收对象数据，您可以简单地访问这些数据或将其值分配给其他对象。

在您的情况下，您可以为组件范围内的 echartBar 对象分配一个值，如下所示：

this.echartBar.xAxis[0].data = response.data.months

这假设您的响应数据中有 months 属性。

这个过程可能很麻烦，尤其是当您在 echartBar 对象上有很多属性时。您需要检查数组等中的数组。lodash 之类的库在这种情况下可能会有所帮助，例如它的 set 函数：https://lodash.com/docs/4.17.15#set

【讨论】：