获取最新中央气象台降水预报图片数据

最新推荐文章于 2025-03-04 17:55:30 发布

原创最新推荐文章于 2025-03-04 17:55:30 发布 · 674 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #javascript

工具类同时被 3 个专栏收录

55 篇文章

订阅专栏

Spring Boot

33 篇文章

订阅专栏

JavaScript

5 篇文章

订阅专栏

本文介绍了如何使用JavaScript库axios和cheerio从中央气象台网站抓取1天降水预报的图片数据，包括URL处理和异步请求的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取最新中央气象台降水预报图片数据

JS版

import axios from "axios";
import * as cheerio from "cheerio";

const BASE_URL = "http://www.nmc.cn";
const SOURCE_URL = BASE_URL + "/publish/precipitation/1-day.html";
const BASE_CLASS_NAME =
  ".container .row .col-xs-10 .bgwhite .p-wrap .p-nav.nav2 ul li a";
const IMAGE_ID = "#imgpath";

function getHour(url) {
  if (url != undefined) {
    let fileName = url.substring(
      url.lastIndexOf("_") + 1,
      url.lastIndexOf(".")
    );
    let index = url.lastIndexOf(".")
    let hour = url.substring(index - 5, index) / 100;
    return hour;
  }
  return "";
}

async function getBaseUrl() {
  const response = (await axios.get(SOURCE_URL)).data;
  const $ = cheerio.load(response);
  const featuredUrls = $(BASE_CLASS_NAME);

  let linkUrls = [];
  for (let i = 0; i < featuredUrls.length; i++) {
    let linkUrl = $(featuredUrls[i]).attr("href");
    let url = BASE_URL + linkUrl;
    linkUrls.push(url);
  }

  let imageUrlList = [];
  return axios.all(linkUrls.map((link) => axios.get(link))).then((resList) => {
    resList.forEach((res) => {
      const $ = cheerio.load(res.data);
      const imageDom = $(IMAGE_ID);
      let imageUrl = $(imageDom).attr("src");
      let hour = getHour(imageUrl);

      imageUrlList.push({
        hour,
        imageUrl,
      });
    });
    return imageUrlList;
  });
}

let rainImageList = await getBaseUrl();
//console.log(rainImageList)
export default rainImageList;