使用 ReactJS 和实时 API 的 COVID-19 跟踪器

介绍

本项目是一个使用 ReactJS 和实时 API 的 COVID-19 跟踪器。它可以动态地显示全球和各个国家的 COVID-19 感染情况，包括感染人数、死亡人数和康复人数。

本项目使用 ReactJS 进行开发，并使用 Disease.sh 提供的实时 API 来获取疫情数据。

功能

本项目具有以下功能：

• 动态显示全球和各个国家的感染情况
• 显示每个国家的 COVID-19 感染率（每百万人口）
• 显示每个国家的死亡率（每百万人口）
• 显示每个国家的康复率（每百万人口）
• 支持搜索功能，可以通过国家名或地区名来搜索 COVID-19 感染情况
• 显示最新数据更新时间

技术栈

• ReactJS：用于编写用户界面的 JavaScript 库
• React Router：用于处理路由的库
• Axios：用于发送 HTTP 请求和处理响应的库
• Chart.js：用于绘制图表的库
• Moment.js：用于解析和格式化日期时间的库

如何使用

1. 克隆本仓库到本地：

   git clone https://github.com/example/covid19-tracker.git
   

2. 进入该仓库：

   cd covid19-tracker
   

3. 安装依赖：

   npm install
   # 或者
   yarn install
   

4. 运行服务器：

   npm start
   # 或者
   yarn start
   

5. 在浏览器中访问 http://localhost:3000。

代码片段

以下是用于发送获取 COVID-19 数据的请求的代码片段：

import axios from "axios";

// 获取全球 COVID-19 感染情况
export const getGlobalData = async () => {
  try {
    const response = await axios.get(`https://disease.sh/v3/covid-19/all`);
    const { cases, deaths, recovered, updated } = response.data;
    const data = {
      cases,
      deaths,
      recovered,
      updated,
    };
    return data;
  } catch (error) {
    console.error(error);
  }
};

// 获取各个国家的 COVID-19 感染情况
export const getCountriesData = async () => {
  try {
    const response = await axios.get(
      `https://disease.sh/v3/covid-19/countries?sort=${"cases"}`
    );
    const countriesData = response.data.map((country) => ({
      name: country.country,
      flag: country.countryInfo.flag,
      cases: country.cases,
      todayCases: country.todayCases,
      deaths: country.deaths,
      todayDeaths: country.todayDeaths,
      recovered: country.recovered,
      todayRecovered: country.todayRecovered,
      active: country.active,
      critical: country.critical,
      casesPerOneMillion: country.casesPerOneMillion,
      deathsPerOneMillion: country.deathsPerOneMillion,
      updated: country.updated,
    }));
    return countriesData;
  } catch (error) {
    console.error(error);
  }
};

以上代码中，我们使用了 axios 库来发送 GET 请求，获取全球和各个国家的 COVID-19 感染情况。我们使用了 Disease.sh API，该 API 提供了实时的 COVID-19 数据。

我们定义了两个函数 getGlobalData 和 getCountriesData，它们分别用于获取全球和各个国家的 COVID-19 感染情况。这两个函数都是异步函数，因为我们需要等待服务器响应返回后才能获取数据。

在函数中，我们使用 await 和 axios.get() 来发送 GET 请求。我们提供 URL，该 URL 是包含 COVID-19 数据的特定 API 端点的 URL。API 返回一个包含 COVID-19 感染情况数据的 JSON 对象。我们解构数据对象，并返回所有数据项。

以上代码仅是本项目的一部分。如果您想查看完整的代码，请前往 GitHub 仓库：https://github.com/example/covid19-tracker。