往期文章目录:

获取疫情数据

在上一篇 React 17 + Vite + ECharts 实现疫情数据可视化「04 初始化项目」 中我们对项目进行了初始化操作,对目录结构进行了更新,然后安装了本次项目所依赖的包,最后实现了一个比较简单的页面。

那么,本篇开始要往实际代码编写了,首先第一步就是获取疫情的数据并进行处理。

非常高兴能与大家在第 5 篇相见,我们进入正文吧!

接口来源

这个接口并非本人编写,同样是为了节省一些成本,前端只做页面渲染,真正的数据由后端返回(假设这个接口就是后端同学给我们写好的)。

url: "https://vyps.api.storeapi.net/api/94/219?format=json&appid=6832&sign=4376a0d8b37115ae1b478f2aa19c09fb",

打开上述网址,会返回给我们一系列数据,如下图所示:

我知道会有一小部分小伙伴会疑惑,诶,这个接口返回数据怎么就是 JSON 格式化好了的,我的怎么不是的。

这里,我是用了一个浏览器插件 JSONView,这个对于数据查看还是比较方便的,但需要科学上网才能下载哈,在谷歌商店就能搜索到,如果有访问不了的小伙伴可以留言一下,帮你解决问题。

说明:接口来源于网络,仅供学习之用,并非本人接口,请大家合理使用,共建和谐网络环境。

配置请求,获取数据

现在,我们就在我们项目中配置请求了,首先先获取数据。

在之前创建好的 api 目录中,新建一个名为 getCovid19Data.js 的文件,编写如下代码:

import axios from "axios"

// 获取疫情统计数据
export function getCovidDataList() {
return axios({
method: "get",
url: "https://vyps.api.storeapi.net/api/94/219?format=json&appid=6832&sign=4376a0d8b37115ae1b478f2aa19c09fb",
})
}

解释一下上述代码,首先第一行,是在 「04 初始化项目」 这篇文章中安装了 axios 模块,如果有跳过观看并且没明白的小伙伴可以返回再看一下。

接下来就是导出了一个获取疫情统计数据的函数,方法是 get 请求。

之后,我们在 pages/Home 目录下的 Home.jsx 文件中的头部进行导入函数接口:

import {  getCovidDataList } from "./../../api/getCovid19Data";

同时,第一行需要导入我们在「03 学习 React Hooks」这篇文章中学习的 Hook。

import React, { useState, useEffect} from "react";

接下来,就是在 Home 组件中编写基本的请求逻辑代码了,如下所示:

const [mapList, setMapList] = useState([]);

useEffect(async () => {
const res = await getCovidDataList();
console.log('获取的疫情统计数据', res);
});

我们看看控制台会打印什么东西:

展开 retdata 就是一系列疫情数据了,如下图所示:


因此,我们需要的就是 retdata 里面的数据了,那么数据获取这一节就结束了,是不是比较轻松呢。

但有一点得注意的是现在的部分字段名并不是我们所需要的,因此我们得对数据进行处理,将一部分字段名进行修改,我们就在下一节来进行处理了。

疫情数据处理

编写工具方法

在上一节中,我们获取到了疫情数据,这一节我们再来写一个方法来对我们的数据进行处理,这里就要用到在 「04 初始化项目」 这篇文章新建的 utils 目录了,在目录下创建一个名为 utils 的文件,编写如下代码:

// 将数据格式化为地图所需格式的工具
export function getMapDataUtil(list = []) {
let mapList = [];
list.forEach((item) => {
let mapItem = {
name: item.xArea,
value: item.confirm,
...item,
};
mapList.push(mapItem);
});
return mapList;
}

解释一下上述代码,因为地图所需的部分格式是需要 name 和 value 两个字段,这里是将获取的数据中的 xArea 作为了 name 字段的值,而 confirm 则作为 value 字段的值。

写好了工具方法之后,我们继续在 Home 组件中进行导入,然后将数据处理,最后将数据通过 useState 将数据进行存放,后续会有需要使用。

import { getMapDataUtil } from "./../../utils/utils"
useEffect(async () => {
const fn = async () => {
const res = await getCovidDataList();
const { retdata } = res.data;
const list = getMapDataUtil(retdata);
setMapList(list);
}
fn();
}, []);

maplist 获取到了之后,我们就可以传递给我们的子组件 (components/Map 目录下)Map.jsx 中了,但是考虑到必须有数据了我们子组件才做渲染,那么可以进行一个判定,如下述代码所示:

return <>{mapList.length > 0 ? <Map mapList={mapList} /> : null}</>;

完整实现代码

最后,附上整个 Home 组件的实现代码:

import React, { useState, useEffect } from "react";
import Map from "./../../components/Map/Map";
import { getMapDataUtil } from "./../../utils/utils";
import { getCovidDataList } from "./../../api/getCovid19Data";
import s from "./style.module.css";

const Home = () => {
const [mapList, setMapList] = useState([]);

useEffect(async () => {
const fn = async () => {
const res = await getCovidDataList();
const { retdata } = res.data;
const list = getMapDataUtil(retdata);
setMapList(list);
}
fn();
}, []);

return <>{mapList.length > 0 ? <Map mapList={mapList} /> : null}</>;
};

export default Home;

联系 & 期待下一篇

项目介绍本篇就到此结束了,让我们期待接下来的文章吧。

博主 21 届本科毕业,可以称呼我 Chocolate,现开通了个人公众号「小狮子前端」,在这里分享我的大厂面试经历,租房攻略,计算机领域那些事儿。

喜欢可以关注一下,还是那句话,现在关注以后就是老粉了,加博主微信可以拉你加入小狮子前端交流|内推群。

希望小伙伴们能够喜欢我的文章,这里是小狮子前端,保持狮子座的热情带给你学习的动力,愿我们成为最好的自己~

QQ交流群:666151691

学如逆水行舟,不进则退