如何使用 fetch api 获取 XML

IT技术 javascript xml fetch-api
2021-03-07 07:47:25

我正在尝试制作一个天气应用程序,显示一周中许多天的天气和温度。我目前正在使用 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))
3个回答

使用原生 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));
}
如果DOMParserwindow(正如名称所示)的一部分,它必须仅对客户端 JavaScript 有效。在其他情况下你会怎么做,例如在 Node.js 中?
2021-04-24 07:47:25
作为旁注:在谈到编程时,我不会将“伟大的”和“视频”合并成一个句子。
2021-04-25 07:47:25
Steve Griffith 有一个很棒的视频,向他展示了如何使用 fetch 来获取 XML(很像上面的代码)。他有他视频中的代码要点
2021-04-30 07:47:25
所以DOMParser原型只有一个记录在案的成员parseFromString我觉得也有parseFromStreamparseFromBlob等...
2021-05-02 07:47:25

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

据我所知,没有针对 的原生 XML 解析器fetch,但您可以将响应作为文本处理并使用第三方工具进行实际解析,例如 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))
}
用于解析 XML 的 jQuery 函数短小精悍,并使用 DOMParser(),如@JukkaP 的回答:github.com/jquery/jquery/blob/...
2021-04-25 07:47:25
我可以确认没有用于获取的本机 XML 解析器。请参阅developer.mozilla.org/en-US/docs/Web/API/Response#Methods
2021-05-07 07:47:25

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

首先,我们安装两个module xml-js 和 node-fetch :

npm install xml-js --save 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 图形”。有一些关于深度搜索对象图的技巧可以深入寻找一个关键,比如GitHub 上的 obj-traverse 库

这不会给出预期的键值 JSON,而是一个带有许多额外键的复杂键值。
2021-05-12 07:47:25