如何在 VUE 中返回承诺响应并存储在外部对象中答案

【问题标题】：How to return promise response and store in external object in VUE如何在 VUE 中返回承诺响应并存储在外部对象中
【发布时间】：2020-09-11 14:31:31
【问题描述】：

我正在尝试在vue 中实现higchart 网络图。它与静态数据一起工作正常。当我尝试使用axios 获取数据时，它不起作用。

export default {
  data() {
    return {
      networkOptions: {
        chart: {
          type: "networkgraph",
          height: "100%",
        },
        title: {
          text: "",
        },
        subtitle: {
          text: "A Force-Directed Network Graph",
        },
        plotOptions: {
          networkgraph: {
            keys: ["from", "to"],
            layoutAlgorithm: {
              enableSimulation: true,
              integration: "euler",
              linkLength: 20,
              friction: -0.9,
            },
          },
        },
        series: [{
          dataLabels: {
            enabled: false,
            linkFormat: "",
          },
          id: "lang-tree",
          data: this.mygetCall(),
        }, ],
      },
    };
  },
  methods: {
    mygetCall: async function() {
      let url = `api url`;
      return await axios
        .get(url)
        .then((response) => {
          console.log(response.data);
          let dataLink = response.data;
          let filterArray = [];
          dataLink.forEach(function(index) {
            let ref = index.referred_to.replace(/(^\w+:|^)\/\//, "").trim();
            let url = index.url.replace(/(^\w+:|^)\/\//, "").trim();
            filterArray.push([ref, url]);
          });
          console.log(filterArray);
          return filterArray;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};

我尝试使用 async 并等待。但它不起作用。如果是来自mygetCall 的控制台响应，它会显示结果。

【问题讨论】：

I tried with async and await - 在哪里？你不能指望代码帮助而不显示代码
请提供更多代码。你的 axios 请求是什么样的？
神圣的无格式代码蝙蝠侠！这很难阅读...但是return filterArray; 尝试更新组件数据中的键并将 highchart 绑定到该反应元素。
@TimWickstrom 我也试过了，它得到了更新，但没有显示网络图。我试图改变图表的标题，如下所示。它工作正常 this.networkOptions.title.text = dataLink[0].url;但是当我尝试这个时，它不起作用 this.networkOptions.series.data = filterArray;
如果您正确绑定数据，听起来 HighChart 对更改没有反应。你在使用官方的 HighChart Vue 包装器吗？如果是这样，请显示您的代码。 highcharts.com/blog/tutorials/highcharts-vue-wrapper

标签： javascript vue.js promise

【解决方案1】：

我格式化了你的 javascript 并查看了它，你使用 .then().catch() 的方式可能有效，但你要么需要另一个承诺或回调。检查下面它*应该工作：

export default {
    data() {
        return {
            networkOptions: {
                chart: {
                    type: "networkgraph",
                    height: "100%",
                },
                title: {
                    text: "",
                },
                subtitle: {
                    text: "A Force-Directed Network Graph",
                },
                plotOptions: {
                    networkgraph: {
                        keys: ["from", "to"],
                        layoutAlgorithm: {
                            enableSimulation: true,
                            integration: "euler",
                            linkLength: 20,
                            friction: -0.9,
                        },
                    },
                },
                series: [{
                    dataLabels: {
                        enabled: false,
                        linkFormat: "",
                    },
                    id: "lang-tree",
                    data: this.mygetCall(),
                }, ],
            },
        };
    },
    methods: {
        mygetCall: function() {
            try{
                let url = `api url`;
                const response = await axios.get(url)
                if(response.data){
                    console.log(response.data);
                    let dataLink = response.data;
                    let filterArray = [];
                    dataLink.forEach(function(data) {
                        let ref = data.referred_to.replace(/(^\w+:|^)\/\//, "").trim();
                        let url = data.url.replace(/(^\w+:|^)\/\//, "").trim();
                        filterArray.push([ref, url]);
                    });
                    console.log(filterArray);
                    return filterArray;
                }
            }catch(error){
              console.log(error)
            }
        },
    },
};

【讨论】：

我也试过这个。不工作。它的控制台 filterArray 但网络图未显示
filterArray 的格式是否正确？比较你的硬编码数据解析和axios响应数据解析时的格式
如果您的数据是响应式的，则它在 HighChart 的模板代码中未正确绑定。 highcharts.com/blog/tutorials/highcharts-vue-wrapper
感谢@TimWickstrom 我在将数据绑定到对象时犯了错误。现在它工作正常感谢 this.networkOptions.series[0].data = filterArray
很高兴您能够解决您的问题并让您的代码正常工作！

【解决方案2】：

methods: {
        mygetCall: function() {
            let filterArray = [];
      try {
        let url = `https://appup2.dev.500apps.io/v2ns/1599642495753_link`;
        const response = await axios.get(url);
        if (response.data) {
          let dataLink = response.data;
          dataLink.forEach(function (i) {  
            let url = i.url.replace(/(^\w+:|^)\/\//, "").trim();    
          });
          this.networkOptions.series[0].data = filterArray;
        }
      } catch (error) {
        console.log(error);
      }
        },
    },

【讨论】：