如何使用获取 api 获取 XML

我正在尝试做一个天气应用程序，显示天气和温度的许多天的一周。我目前正在使用 openweathermap api 完成这样的任务，问题是我想要的信息(即天气日期)仅以 xml 格式提供。 因为我在 ES6(ES2015)中重新构建它是出于学术原因，所以我也想使用提取 api，但是由于提取方法解析了它，它只是提供了一个错误。 所以我怎样才能得到它或者我有一个更好的方法做到这一点。

let apis = {
currentWeather: { //get user selected recomendation weather
api:"http://api.openweathermap.org/data/2.5/forecast/daily?lat=",
parameters: "&mode=xml&units=metric&cnt=6&APPID=/*api key*/",
url: (lat, lon) => {
return apis.currentWeather.api + lat + "&lon=" + lon +
apis.currentWeather.parameters
}
}
};
function getCurrentLoc() {
return new Promise((resolve, reject) =>  navigator.geolocation
.getCurrentPosition(resolve, reject))
}
function getCurrentCity(location) {
const lat = location.coords.latitude;
const lon = location.coords.longitude;
return fetch(apis.currentWeather.url(lat, lon))
.then(response => response.json())
.then(data => console.log(data))
}
getCurrentLoc()
.then( coords => getCurrentCity(coords))
90790 次浏览
小开

我猜错误来自这个函数: response => response.json()，因为响应不是有效的 JSON 对象(它是 XML)。

据我所知，还没有针对 fetch的原生 XML 解析器，但是您可以将响应作为文本处理，并使用第三方工具进行实际的解析，例如 jQuery 有一个 $.parseXML()函数。

它看起来会像这样:

function getCurrentCity(location) {
const lat = location.coords.latitude;
const lon = location.coords.longitude;
return fetch(apis.currentWeather.url(lat, lon))
.then(response => response.text())
.then(xmlString => $.parseXML(xmlString))
.then(data => console.log(data))
}
小开
最佳答案

使用本地 DOMParser getCurrentCity (location)可以编写:

function getCurrentCity(location) {
const lat = location.coords.latitude;
const lon = location.coords.longitude;
return fetch(apis.currentWeather.url(lat, lon))
.then(response => response.text())
.then(str => new window.DOMParser().parseFromString(str, "text/xml"))
.then(data => console.log(data));
}
小开

对于那些想在 Node REPL 中测试它的人来说，可以使用 npm xml-js 库和 Node-fett 在 Node.js 中完成这项工作。

首先，我们用以下方法安装两个模块 xml-js 和 node-get:

Npm install xml-js —— save 安装节点获取——保存

将这两个包存储到 package.json 中。现在回到我们手头的问题——如何处理从 API 返回的 XML 数据。

考虑下面这个在挪威获取特定气象站的例子:

const fetch = require('node-fetch');
const convert = require('xml-js');
let dataAsJson = {};


fetch('http://eklima.met.no/metdata/MetDataService?invoke=getStationsProperties&stations=68050&username=')
.then(response => response.text())
.then(str => {
dataAsJson = JSON.parse(convert.xml2json(str))
})
.then(() => {
console.log('Station id returned from the WS is:' +
`${dataAsJson.elements[0].elements[0].elements[0].elements[0].elements[0].elements
.filter(obj => { return obj.name == 'stnr'; })[0].elements[0].text} Expecting 68050 here!`
);
});

现在，我们已经得到了一个变量，该变量实际上通过转换器的 xml2json 方法和 JSON.parse 从 XML 数据解析成一个 JSON 对象。如果我们想打印出对象，我们可以使用 JSON.stringify 将 JSON 对象转换成字符串。在这段代码中检索站 ID 只是表明需要深入地扫描一个对象图以找到一个给定的键，因为将 XML 转换成 Json 通常会给出更深入的对象图，因为包装 XML 元素总是在“ XML 对象 JSON-graph”的顶部。有一些关于深度搜索对象图的技巧，深度搜索键，如 GitHub 上的 obj-traverse 库

小开

这在我的角度应用程序中起作用了

import * as xml2js from 'xml2js';


url = MY_URL;


ngOnInit(): void {
this.getData();
}


getData(): void {
fetch(MY_URL)
.then(response => response.text())
.then(data => {
let parseString = xml2js.parseString;
parseString(data, function (err, result) {
console.log(result);
console.error(err);
});
});
}

提交答案