Question

我正在尝试制作天气应用程序，以显示一周中许多天的天气和温度。我目前正在使用openweathermap api进行此类任务，事情是我想要的信息（即天气的日期）仅以xml格式提供。由于我出于学术原因在ES6（ES2015）中重建它，我想也使用fetch api，但由于fetch方法解析它，它只是传递错误。所以我怎样才能获取它或者mby有更好的方法来实现它。

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))

Answer 1

可以编写使用本机DOMParser getCurrentCity（位置）：

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))
}

Answer 2

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

据我所知，fetch没有原生XML解析器，但您可以将响应作为文本处理，并使用第三方工具进行实际解析，例如jQuery有{{1}功能。

它看起来像：

$.parseXML()

Answer 3

对于那些想在Node REPL中进行测试的人来说，可以使用npm xml-js库和node-fetch在Node.js中进行此操作。

首先，我们使用以下命令安装两个模块xml-js和node-fetch：

npm install xml-js-保存 npm install node-fetch --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!`);
});

我们现在有了一个变量，该变量实际上是使用convert的xml2json方法并使用JSON.parse从XML数据解析为JSON对象的。如果要打印对象，可以使用JSON.stringify将JSON对象转换为字符串。在此代码中对站点ID的检索仅表明需要深入浏览给定键的对象图，因为将XML转换为Json通常会提供更深的对象图，因为包装XML元素始终位于“ XML对象JSON图”。关于深度搜索对象图的一些技巧很深，可以寻找关键字，例如obj-traverse library on GitHub

如何使用fetch api获取XML

3 个答案: