在Vue.js项目开发中，除了常见的JSON数据交互，有时也需要处理XML格式的数据，比如对接遗留系统接口或者读取本地XML配置文件。下面我们就一步步实现Vue.js请求并展示XML数据的完整流程。
准备工作
首先我们需要创建一个基础的Vue.js项目，如果你已经有现成的项目可以直接使用。本文示例基于Vue 3的Composition API实现，如果你使用Vue 2只需要调整对应的API写法即可。另外我们需要一个提供XML数据的接口，这里我们可以用本地模拟的XML文件来测试。
发起异步请求获取XML数据
Vue.js中发起异步请求通常使用axios库，首先安装axios：
npm install axios --save
然后在组件中引入axios，发起请求获取XML数据。注意请求时需要设置响应类型为document，这样axios会直接返回解析好的XML文档对象，不需要我们手动处理字符串。
import { ref, onMounted } from 'vue'
import axios from 'axios'
export default {
setup() {
// 定义存储解析后数据的响应式变量
const xmlDataList = ref([])
// 定义加载状态和错误状态
const loading = ref(false)
const errorMsg = ref('')
// 请求XML数据的方法
const fetchXmlData = async () => {
loading.value = true
errorMsg.value = ''
try {
// 发起请求，设置响应类型为document，自动解析XML
const response = await axios.get('/api/test.xml', {
responseType: 'document'
})
// response.data就是解析后的XML文档对象
const xmlDoc = response.data
// 获取所有item节点
const items = xmlDoc.getElementsByTagName('item')
const tempList = []
// 遍历节点提取数据
for (let i = 0; i < items.length; i++) {
const item = items[i]
const title = item.getElementsByTagName('title')[0]?.textContent || ''
const content = item.getElementsByTagName('content')[0]?.textContent || ''
const time = item.getElementsByTagName('time')[0]?.textContent || ''
tempList.push({
title,
content,
time
})
}
xmlDataList.value = tempList
} catch (error) {
errorMsg.value = '请求XML数据失败，请稍后重试'
console.error('请求错误：', error)
} finally {
loading.value = false
}
}
// 组件挂载时发起请求
onMounted(() => {
fetchXmlData()
})
return {
xmlDataList,
loading,
errorMsg
}
}
}
XML数据结构示例
上面的请求对应的test.xml文件内容如下，你可以把这个文件放在项目的public目录下，请求路径对应为/test.xml：
<?xml version="1.0" encoding="UTF-8"?>
<data>
<item>
<title>第一条数据</title>
<content>这是第一条XML数据的内容</content>
<time>2024-05-01</time>
</item>
<item>
<title>第二条数据</title>
<content>这是第二条XML数据的内容</content>
<time>2024-05-02</time>
</item>
<item>
<title>第三条数据</title>
<content>这是第三条XML数据的内容</content>
<time>2024-05-03</time>
</item>
</data>
渲染XML数据到页面
获取到解析后的数据后，我们就可以在模板中渲染展示了，同时可以处理加载状态和错误状态的展示：
<template>
<div class="xml-data-container">
<h3>XML数据展示</h3>
<!-- 加载状态 -->
<div v-if="loading" class="loading">
数据加载中...
</div>
<!-- 错误状态 -->
<div v-else-if="errorMsg" class="error">
{{ errorMsg }}
</div>
<!-- 数据展示 -->
<div v-else>
<ul v-if="xmlDataList.length > 0" class="data-list">
<li v-for="(item, index) in xmlDataList" :key="index" class="data-item">
<h4>{{ item.title }}</h4>
<p>内容：{{ item.content }}</p>
<p>时间：{{ item.time }}</p>
</li>
</ul>
<div v-else class="empty">
暂无数据
</div>
</div>
</div>
</template>
<style scoped>
.xml-data-container {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
.loading, .error, .empty {
text-align: center;
padding: 40px;
color: #666;
}
.error {
color: #f56c6c;
}
.data-list {
list-style: none;
padding: 0;
}
.data-item {
border: 1px solid #eee;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
}
.data-item h4 {
margin-top: 0;
color: #333;
}
.data-item p {
color: #666;
line-height: 1.6;
}
</style>
常见问题说明
- 如果接口返回的是XML字符串而不是文档对象，需要手动解析，可以使用
DOMParser：const parser = new DOMParser() const xmlDoc = parser.parseFromString(xmlString, 'text/xml')
- 如果XML数据中有命名空间，获取节点时需要使用
getElementsByTagNameNS方法，传入命名空间URI和标签名。 - 跨域请求XML数据时，需要服务端配置对应的CORS头，否则请求会被浏览器拦截。
总结
Vue.js请求并展示XML数据的核心步骤就是：发起异步请求时设置正确的响应类型，获取XML文档对象后解析提取需要的节点数据，最后将解析后的数据绑定到模板中渲染。整个过程并不复杂，只要注意XML的解析方法和响应类型的设置，就可以顺利实现需求。如果项目中需要频繁处理XML数据，还可以把解析逻辑封装成公共方法，提高代码复用性。