从 Axios 响应中解析 XML，推送到 Vue 数据数组

Posted 2023-02-22

【中文标题】从 Axios 响应中解析 XML，推送到 Vue 数据数组

【英文标题】：Parse XML from Axios response, pushing to Vue data array

【发布时间】：2018-07-25 02:02:31

【问题描述】：

在我的 Vue 应用程序中，我使用 Axios 获得了一个 XML 文件，并使用 parseString 将 XML 解析为 JSON。然后我需要将 result 传递给 Vue 数据 (this.events)。我的console.log 将解析后的 XML 显示为 JSON，但我无法在此函数内推送到 Vue 数据。

var parseString = require('xml2js').parseString;

axios.get(`http://url.to/events.xml`)
  .then(response => 
    parseString(response.data, function (err, result) 
      console.log(result); // returns a json array
      this.events = result // nothing happens
    );        
  )

如何在 Vue 中将我的 JSON 数组存储到 this.data？

【参考方案1】：

This answer 是正确的。但是，我会在任何地方都使用箭头函数，所以this 始终是 VUE 类组件。另外，我会检查解析错误。

axios.get('http://url.to/events.xml')
  .then(response => 
    parseString(response.data, (err, result) => 
      if(err) 
       //Do something
       else 
       this.events = result
     
    );        
  )

【参考方案2】：

尽量不要在parseString 中使用this，可能是范围问题，这意味着this 不是指vue 数据对象。

试试这个：

axios.get('http://url.to/events.xml')
  .then(response => 
    var self = this; 
    parseString(response.data, function (err, result) 
      self.events = result
    );        
  )

【讨论】：

这有帮助，我现在可以传递数据了。谢谢！

您可以使用 ES6 箭头函数来维护执行上下文并仍然使用它:)