js 请求api + 解析数据 2个例子

news2024/11/17 3:38:27

起因, 目的:

补补 js 基础。

例1, 请求天气 api, 天气数据api

js 中的 await

  • await 关键字只能在 async 函数内部使用。
  • 函数内部可以使用 await,但是在函数外部直接使用 await 是不允许的。
async function fetchWeatherData(param) {
  try {
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${param}&appid=e34b4c51d8c2b7bf48d5217fe52ff79e`
    );

    const data = await response.json();
    if (data) {
      // console.log("data: ", data);

      // 解析数据,可以直接在函数内部进行解析.
      countryName = data?.sys?.country;
      console.log("函数内部: 国家名称是: ", countryName);

      return data; // 返回数据. 用于在此函数外面进行处理.
    }
  } catch (e) {
    console.log("error: ", e);
  }
}

// 调用函数.
fetchWeatherData("London");

// 调用函数的第二种写法
fetchWeatherData("London").then((someCity) => {
  console.log("函数外部: 国家名称是: ", someCity.sys.country);
});

/*  
api 返回的结果是:

data:  {
  coord: { lon: -0.1257, lat: 51.5085 },
  weather: [
    {
      id: 804,
      main: 'Clouds',
      description: 'overcast clouds',
      icon: '04d'
    }
  ],
  base: 'stations',
  main: {
    temp: 287.13,
    feels_like: 286.88,
    temp_min: 286.05,
    temp_max: 288.01,
    pressure: 1009,
    humidity: 88,
    sea_level: 1009,
    grnd_level: 1006
  },
  visibility: 10000,
  wind: { speed: 5.14, deg: 290 },
  clouds: { all: 100 },
  dt: 1725867798,
  sys: {
    type: 2,
    id: 2075535,
    country: 'GB',
    sunrise: 1725859588,
    sunset: 1725906561
  },
  timezone: 3600,
  id: 2643743,
  name: 'London',
  cod: 200
}
*/
例2, 获取 nasa api, 每日太空壁纸

async function fetchAPIData() {
  const NASA_KEY = "RTM35gv1qOoqUTFMK1Gg0CtyELMQ8BvedQYkjQUY";
  // const NASA_KEY = import.meta.env.VITE_NASA_API_KEY;
  const url = "https://api.nasa.gov/planetary/apod" + `?api_key=${NASA_KEY}`;

  //  先检查本地数据。
  const today = new Date().toDateString();
  const localKey = `NASA-${today}`;

  try {
    const data = await fetch(url);
    const apiData = await data.json();
    console.log(apiData);

    const imgUrl = apiData.hdurl;
    console.log("今日太空壁纸, 图片地址: ", imgUrl);
   
    console.log("获取数据成功!");
  } catch (err) {
    console.log("获取数据失败!");
    console.log(err.message);
  }
}


// 调用函数
fetchAPIData();

/*
输出:

{
  date: '2024-09-09',
  explanation: "If you could fly over Mars, what might you see? The featured image shows exactly this in the form of a Mars Express vista captured over a particularly interesting region on Mars in July. The picture's most famous feature is Olympus Mons, the largest volcano in the Solar System, visible on the upper right.  Another large Martian volcano is visible on the right horizon: Pavonis Mons. Several circular impact craters can be seen on the surface of the aptly named red planet. Impressively, this image was timed to capture the dark and doomed Martian moon Phobos, visible just left of center.  The surface feature on the lower left, known as Orcus Patera, is unusual for its large size and oblong shape, and mysterious because the processes that created it still remain unknown.  ESA's robotic Mars Express spacecraft was launched in 2003 and, among many notable science discoveries, bolstered evidence that Mars was once home to large bodies of water.",
  hdurl: 'https://apod.nasa.gov/apod/image/2409/MarsPan_ExpressLuck_2048.jpg',
  media_type: 'image',
  service_version: 'v1',
  title: 'Mars: Moon, Craters, and Volcanos',
  url: 'https://apod.nasa.gov/apod/image/2409/MarsPan_ExpressLuck_1080.jpg'
}
今日太空壁纸, 图片地址:  https://apod.nasa.gov/apod/image/2409/MarsPan_ExpressLuck_2048.jpg
获取数据成功!

*/

比如今天的太空图片是:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2119926.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[mysql]最基本的SELECT...FROM结构

第0种:最基本的查询语句 SELECT 字段名,字段名 FROM 表名 SELECT 1; SELECT 11,3*2; FROM SELECT 11,3*2 FROM DUAL;#dual:伪表 我们可以用它来保持一个平衡 这里我们的值不需要在任何一个表里&#xf…

MyBaits的初理解

一.Mybaits的简介 Mybaits就是对JDBC的简化&#xff0c;就是对持久化的实现。 二.基础 需要导的dependencies <dependencies><!-- mybatis依赖 --><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId>&l…

第 5 章多视图几何

本章讲解如何处理多个视图&#xff0c;以及如何利用多个视图的几何关系来恢复照相机位置信息和三维结构。通过在不同视点拍摄的图像&#xff0c;我们可以利用特征匹配来计算出三维场景点以及照相机位置。本章会介绍一些基本的方法&#xff0c;展示一个三维重建的完整例子&#…

获取多行文本内容,去掉首尾空格、去掉空字符串,解析为文本数组

核心代码 // 获取多行文本内容&#xff0c;去掉首尾空格、去掉空字符串&#xff0c;解析为文本数组 getMultiLineTexts(textareaValue) {return textareaValue.split("\n").map((v) > v.split("\t").join("").trim()).filter((v, i, ar) &g…

Qt | ubuntu20.04安装Qt6.5.3并创建一个example完整教程(涉及诸多开发细节,商用慎重)

点击上方"蓝字"关注我们 01、下载 >>> 下载Qt在线安装包 这里采用镜像地址进行下载,避免网络过慢。 镜像地址:http://mirrors.ustc.edu.cn/qtproject/archive/online_installers/4.5/ 选择最新版本下载,如截至目前最新版本为qt-unified-linux-x64-4.5.2…

“探索数字孪生技术:细数其在各行业的实际应用场景“

数字孪生城市是指在数字世界中创建一个同物理实体城市外观一致、行动一致、思想一致的 数字虚拟城市&#xff0c;实现对现实世界的监测、诊断、回溯、预测和决策控制&#xff0c;用于实体城市的规划、建设、 治理和优化等全生命周期管理&#xff0c;提高城市运行效率和市民居住…

内网穿透的应用-Deepin系统安装x11vnc实现任意设备无公网IP远程连接Deepin桌面

文章目录 前言1. 安装x11vnc2. 本地远程连接测试3. Deepin安装Cpolar4. 配置公网远程地址5. 公网远程连接Deepin桌面6. 固定连接公网地址7. 固定公网地址连接测试 前言 本文主要介绍在Deepin系统中安装x11vnc工具&#xff0c;并结合Cpolar内网穿透工具实现任意设备无公网IP也可…

计算机毕业设计Pyhive+Spark招聘可视化 职位薪资预测 招聘推荐系统 招聘大数据 招聘爬虫 大数据毕业设计 Hadoop Scrapy

《SparkHive招聘推荐与预测系统》开题报告 一、引言 随着互联网技术的飞速发展&#xff0c;招聘行业积累了大量的数据&#xff0c;包括职位信息、应聘者信息、企业信息等。这些数据中蕴含着丰富的价值&#xff0c;能够帮助企业和求职者更好地匹配&#xff0c;提高招聘效率。然…

浮点数精度问题

为什么会产生精度问题&#xff1f; 我们带着这个问题去探寻浮点数二进制的存储原理 浮点数是怎么存在计算机中的&#xff1f; 浮点数在计算机中的表示通常遵循IEEE 754标准。其基本概念如下&#xff1a; 结构&#xff1a;浮点数由三部分组成&#xff1a; 符号位&#xff08;…

Android主副屏显示-Android13

Android主副屏显示-Android13 1、DisplayDeviceInfo屏幕信息2、LogicalDisplay.java2.1 configureDisplayLocked刷新 DisplayManagerService启动及主屏添加-Android13 1、DisplayDeviceInfo屏幕信息 DisplayManagerService启动及主屏添加-Android13 中监听获取&#xff0c;在L…

Vue3+ElementPlus 封装图片空间组件的门面

什么是图片空间? 图片空间就是专门管理我们上传图片的地方。就好比用户管理一样&#xff0c;我们对要上传的图片进行管理。 这样做的好处有哪些&#xff1f; 我们把可能需要的图片都上传到图片管理中。在其他需要图片的地方&#xff08;如&#xff1a;商品图片等&#xff09;可…

【MATLAB】FIR滤波器的MATLAB实现

FIR滤波器的MATLAB实现 FIR滤波器的设计fir1函数fir2函数 与IIR滤波器相比&#xff0c;FIR滤波器既有其优势也有其局限性。FIR滤波器的主要优点包括&#xff1a; 精确的线性相位响应&#xff1b;永远保持稳定性&#xff1b;设计方法通常是线性的&#xff1b;在硬件实现中具有更…

Open CASCADE学习|按圆离散旋转体

旋转体是一个非常重要的概念&#xff0c;它涉及到三维空间中由二维曲线绕某一轴线旋转形成的立体形状。这种旋转体的形成过程&#xff0c;实际上是一个连续变化的动态过程&#xff0c;但在数学和几何学中&#xff0c;我们往往通过静态的方式来描述和研究它。 旋转体的基本特性…

中电金信智能视觉分析系统,以AI技术助力企业升级

基于行业需求与业务痛点&#xff0c;中电金信推出了智能视觉分析系统。该系统是集视频接入、视频识别与分析、AI算法管理、异常报警等为一体&#xff0c;可提供视频安全监管标准的场景应用方案以及二次开发能力的通用智能视觉分析系统。该系统拥有强大的监控摄像头设备接入能力…

EFI引导模式下配置Windows和Linux双系统共存

这几天在VirtualBox虚机里玩Modular MAX下的LLama3大模型&#xff0c;实在受不了这执行速度&#xff0c;于是下决心把Ubuntu系统安装在硬盘上跟Windows11做双系统共存。之前在传统BIOS引导模式下做过不少次双系统引导&#xff0c;EFI模式下第一次做&#xff0c;加之windows系统…

【JavaSE】--数据类型与变量

文章目录 1. 字面常量2. 数据类型3. 变量3.1 变量概念3.2 整型变量3.2.1 整型变量3.2.2 长整型变量3.2.3 短整型变量3.2.4 字节型变量 3.3 浮点型变量3.3.1 双精度浮点型3.3.2 单精度浮点型 3.4 字符型变量3.5 布尔型变量3.6 类型转换3.6.1 自动类型转换&#xff08;隐式&#…

Openeuler22 部署 RackTables0.22.0

目录 0、前言 一、部署lamp环境&#xff0c;lamp环境测试 1、部署Apache&#xff0c;apache环境测试 2、部署php、mysql&#xff0c;php环境测试 二、放文件 三、配置mysql 四、安装racktables 第一步、点击proceed继续 第二步、点击proceed 第三步、根据提示进行操作…

【Qt】解决设置QPlainTextEdit控件的Tab为4个空格

前言 PyQt5 是一个用于创建跨平台桌面应用程序的 Python 绑定集合&#xff0c;它提供了对 Qt 应用程序框架的访问。用于开发具有图形用户界面&#xff08;GUI&#xff09;的应用程序&#xff0c;以及非GUI程序。PyQt5 使得 Python 开发者可以使用 Qt 的丰富功能来构建应用程序。…

【无线通信发展史⑨】1791年路易吉·伽伐尼-关于动物电的研究与1800年亚历山大·伏打伯爵-电池:伏打电池

前言&#xff1a;用这几个问答形式来解读下我这个系列的来龙去脉。如果大家觉得本篇文章不水的话希望帮忙点赞收藏加关注&#xff0c;你们的鼓舞是我继续更新的动力。 我为什么会写这个系列呢&#xff1f; 首先肯定是因为我本身就是一名从业通信者&#xff0c;想着更加了解自己…

RHEL 7 安装配置( Linux 网络操作系统 02)

一、虚拟机安装 我们的每台电脑都已经安装了VMware 虚拟机&#xff0c;其安装相当简单&#xff0c;在此不再赘述。可以参考如下链接&#xff1a; VMWare安装傻瓜式教程 &#xff08;大家可以关注老师的博客&#xff0c;也建议大家写博客。&#xff09; 二、红帽 rhel 7 安装 找…