如何解决使用正确的数据获取多个API
大家下午好。
我有一个小型Web应用程序,该应用程序使用API在地图上显示自行车站。
我正在使用此Bike API
这是我的地图-Leaflet Maps
问题:目前,我仅获取一个API,并且从JSON
响应中获取的参数很少。
但是我也需要获取另一个API,并从中仅获取2个参数。
这是我的代码当前的样子-
import "./styles.css";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
const icon = L.icon({
iconSize: [25,41],iconAnchor: [10,popupAnchor: [2,-40],iconUrl: "https://unpkg.com/leaflet@1.6/dist/images/marker-icon.png",shadowUrl: "https://unpkg.com/leaflet@1.6/dist/images/marker-shadow.png"
});
var map = L.map("map",{
preferCanvas: true
}).setView([51.505,-0.09],3);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
fetch("https://gbfs.urbansharing.com/oslobysykkel.no/station_information.json")
.then((responseOne) => responseOne.json())
.then((responseDataOne) => {
console.log(responseDataOne.data);
const stations = responseDataOne.data.stations;
const layerGroup = L.featureGroup().addTo(map);
stations.forEach(({ lat,lon,name,address}) => {
layerGroup.addLayer(
L.marker([lat,lon],{ icon }).bindPopup(
`${name},${address}`
)
);
});
map.fitBounds(layerGroup.getBounds());
});
从该API中可以看到,我要取出name
和address
的地方
我需要使用这个API-https://gbfs.urbansharing.com/oslobysykkel.no/station_status.json
,我只对这个特定的参数感兴趣(来自文档)。
{
"num_bikes_available": 7,"num_docks_available": 5,},
我如何多重获取API并从两个API中获取数据并将它们合并在一起,最终我将拥有类似的东西
...
L.marker([lat,{ icon }).bindPopup(
`${name},${address},${num_bikes_available},${num_docks_available}`
)
...
解决方法
您需要使用Promise.all来实现以下目标:
Promise.all([
fetch(
"https://gbfs.urbansharing.com/oslobysykkel.no/station_information.json"
),fetch("https://gbfs.urbansharing.com/oslobysykkel.no/station_status.json")
]).then(async ([response1,response2]) => {
const responseData1 = await response1.json();
const responseData2 = await response2.json();
const data1 = responseData1.data.stations;
const data2 = responseData2.data.stations;
// console.log(data1,data2);
const layerGroup = L.featureGroup().addTo(map);
data1.forEach(({ lat,lon,name,address,station_id: stationId }) => {
layerGroup.addLayer(
L.marker([lat,lon],{ icon }).bindPopup(
`<b>Name</b>: ${name}
<br/>
<b>Address</b>: ${address}
<br/>
<b>Number of bikes available</b>: ${
data2.find((d) => d.station_id === stationId).num_bikes_available
}
<br/>
<b>Number of docs available</b>: ${
data2.find((d) => d.station_id === stationId).num_docks_available
}
`
)
);
});
map.fitBounds(layerGroup.getBounds());
});
您先获取两个请求。当响应到达时,您将遍历第一个请求数据。使用station_id
,您可以从秒的请求响应数据num_bikes_available
和num_docks_available
中提取并实现所需的行为。
不确定这是否是最有效的方法,但是您不能只在最后一个.then()中进行第二次提取,然后编写一个函数来合并刚刚提取的两个数据
如此:
fetch("https://gbfs.urbansharing.com/oslobysykkel.no/station_information.json")
.then((responseOne) => responseOne.json())
.then((responseDataOne) => {
console.log(responseDataOne.data);
const stations = responseDataOne.data.stations;
fetch("https://secondapi").then((data) => {
//write function to merge the 2
const layerGroup = L.featureGroup().addTo(map);
mergedArray.forEach(({ lat,address}) => {
layerGroup.addLayer(
L.marker([lat,{ icon }).bindPopup(
`${name},${address}`
)
);
});
map.fitBounds(layerGroup.getBounds());
})
});
另外,我目前正在自己做一个传单项目,我必须说,如果您使用ReactJs来构建您的网站,react-leaflet真的很有帮助
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。