当前位置: 首页 > news >正文

使用fetch()异步请求API数据实现汇率转换器

任务8
https://segmentfault.com/a/1190000038998601
https://chinese.freecodecamp.org/news/how-to-master-async-await-with-this-real-world-example/
跟随上面的指示,理解异步函数的编写,并且实现这个汇率转换器。

第一步:在工作区初始化, 创建package.json文件

npm init -y

如果没有npm init -y 创建package.json文件会怎么样?
如果没有使用npm init -y命令创建package.json文件,将会出现以下情况:
1、无法安装和使用任何npm包:npm包管理器需要使用package.json文件来管理安装的包和其版本号,如果没有这个文件,将无法安装或使用任何npm包。
2、无法创建项目依赖关系树:package.json文件不仅记录了项目使用的npm包和版本,还可以指定依赖的其他npm包,没有这个文件将无法创建依赖关系树。
3、难以管理代码版本:package.json文件不仅记录了npm包和版本,还可以记录项目的名称,描述,作者等信息,以及代码管理工具,如Git的分支和标记。没有这个文件,代码版本的管理会变得困难。
4、难以共享代码:package.json文件也包括项目的许可证和其他元数据,可以帮助其他人了解和使用项目,缺少这个文件会使共享代码变得更加困难。

因此,建议在项目根目录下使用npm init -y命令创建package.json文件,以便更好地管理项目依赖,代码版本和共享代码。

第二步:安装fetch
如果此时直接尝试引入fetch使用的时候会报错:fetch is not defined

这个错误通常表示在当前环境下,fetch函数不可用。浏览器环境中,fetch是一个全局对象,可用于发送网络请求。Node.js环境中,fetch不是内置对象,需要使用第三方库或手动实现。

如果你在浏览器环境中遇到了这个错误,可能是因为你的代码运行在一个比较老的浏览器中,不支持fetch函数。你可以尝试使用XMLHttpRequest对象来发送网络请求,或者使用一个polyfill库来实现fetch函数的兼容性。

如果你在Node.js环境中遇到了这个错误,可以尝试使用node-fetch库来实现fetch函数的功能。你需要使用npm或yarn来安装该库,并在代码中引入它。

npm install node-fetch --save

安装完成后,尝试以下代码

const fetch = require('node-fetch');fetch('https://api.github.com/users').then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));

这个示例中,我们通过fetch函数向GitHub API发送了一个GET请求,并在promise链中处理返回的响应数据。在第一个then回调函数中,我们将响应对象response转换为JSON格式,并在第二个then回调函数中打印出获取的用户列表数据。如果请求过程中出现错误,我们则在catch回调函数中捕获并打印出错误信息。

如果报错:

sophia.lee0212x@gmail.com
internal/modules/cjs/loader.js:1102throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);^

原因:
这个错误提示是因为 node-fetch 库中使用了ES Module,而Node.js目前的版本不支持使用 require 加载ES Module。可以尝试在代码中使用 import 来替代 require,或者使用 Babel 这样的工具来将ES Module转换成CommonJS Module。

如果希望继续使用 require 加载 node-fetch,可以在引用该库时,使用以下代码进行引入:

const fetch = require('node-fetch').default;

如果继续报错:

import fetch from './node_modules/node-fetch'
^^^^^^SyntaxError: Cannot use import statement outside a module

原因:这个错误提示表明,在当前文件中使用了 ES6 的模块语法 import,但是 Node.js 不支持在普通的 CommonJS 模块中直接使用 ES6 模块语法。

如果想要在 Node.js 中使用 import 语法,可以将当前文件的后缀名改为 .mjs,或者在 package.json 文件中指定 “type”: “module”。

另外,如果仍然想在 CommonJS 模块中使用 import 语法,可以使用一些工具如 Babel 来进行转换。

应当这样引入fetch(),使用import而不是require:

import fetch from 'node-fetch-npm';

API提供网址:https://apilayer.com/
需要自己注册,拿到密钥
找到货币汇率API和地理API

写三个方法
1、获取fromCurren国家到toCurren国家货币的汇率,货币输入如GBP\EUR
2、通过2-3个货币字符获取国家全名
3、程序入口

完整代码如下:

import fetch from 'node-fetch-npm';// 获取fromCurren国家到toCurren国家货币的汇率,货币输入如GBP\EUR
async function GetConvert(fromCurren1, toCurren1, amount1) {let toCurren = toCurren1;let fromCurren = fromCurren1;let amount = amount1;
//这是每次请求API都要有的const headers1 = new fetch.Headers({'Content-Type': 'application/json'});//这是每次请求API都要有的headers1.append("apikey", "6jxKy8i7RSajhm8A我的密钥HKOatvYI我赌没人看我的密钥和文章xIbiSQh4");var requestOptions = {method: 'GET',redirect: 'follow',headers: headers1};const response = await fetch(`https://api.我赌没人看我的密钥和文章apilayer.com/exch我的密钥angerates_data/convert?to=${toCurren}&from=${fromCurren}&amount=${amount}`, requestOptions);const result = await response.text();const res = await JSON.parse(result).resultif(!res){throw new Error('未获取到汇率!')}return res
}
// GetConvert('GBP','USD',100).then((message) => {
//   console.log(message)
// })// 通过2-3个货币字符获取国家全名
async function GetCountry(CurrentCountry1) {let CurrentCountry = CurrentCountry1;const headers1 = new fetch.Headers({'Content-Type': 'application/json'});headers1.append("apikey", "6jxKy8i7RSajhm8我的密钥AHKOatv我赌没人看我的密钥和文章YIxIbiSQh4");var requestOptions = {method: 'GET',redirect: 'follow',headers: headers1};let res = []const response = await fetch(`https我的密钥://api.apilayer.com/geo/country/我赌没人看我的密钥和文章currency/${CurrentCountry}`,requestOptions)// 这里一定要await,不然获取不到数据await response.text()const result = await response.text()const data = JSON.parse(result);for(let i=0; i<data.length; i++){res.push(data[i].name)}// console.log(res)if(res === []){throw new Error('未获取到国家')}return res
}
// GetCountry('USD').then((message) => {
//   console.log(message)
// })//程序入口
const ConvertCurrency = async (fromCurren, toCurren, amount) => {try{const exchange = await GetConvert(fromCurren, toCurren, amount)const country = await GetCountry(toCurren)return `${amount} ${fromCurren} is worth ${exchange} ${toCurren} , you can use it in ${country}`}catch(error){console.log(error)}
}ConvertCurrency('GBP', 'USD', 100).then((message) => {console.log(message)})

可以看到最后输出:
100 GBP is worth 121.775 USD , you can use it in American Samoa,Bonaire, Sint Eustatius and Saba,British Indian Ocean Territory,United States Minor Outlying Islands,Virgin Islands (British),Virgin Islands (U.S.),Cambodia,Ecuador,El Salvador,Guam,Marshall Islands,Micronesia (Federated States of),Northern Mariana Islands,Palau,Panama,Puerto Rico,Timor-Leste,Turks and Caicos Islands,United States of America,Zimbabwe

100英镑可以换121.775美元,可以在…国家使用
在这里插入图片描述

相关文章:

使用fetch()异步请求API数据实现汇率转换器

任务8 https://segmentfault.com/a/1190000038998601 https://chinese.freecodecamp.org/news/how-to-master-async-await-with-this-real-world-example/ 跟随上面的指示&#xff0c;理解异步函数的编写&#xff0c;并且实现这个汇率转换器。 第一步&#xff1a;在工作区初始…...

GPT-4“王炸”,10秒钟开发一套Web + APP 系统

10秒钟做出一个网站 一则有关GPT4发布会的视频在网上流传&#xff0c;这则两分钟的视频演示的内容是&#xff1a; 1. 在草稿本上用纸笔画出一个非常粗糙的草图&#xff1b; 2. 拍照告诉 GPT 我们要做一个网站&#xff0c;效果正如图所示&#xff0c;让其生成网站代码&#xff1…...

Disjoint 集合数据结构或 Union-Find 算法简介

联合查找算法是一种对此类数据结构执行两个有用操作的算法&#xff1a; 查找&#xff1a;确定特定元素在哪个子集中。这可用于确定两个元素是否在同一子集中。联合&#xff1a;将两个子集连接成一个子集。这里首先我们必须检查这两个子集是否属于同一个集合。如果否&#xff0c…...

uniapp中nvue与vue的区别?

文章目录简介nvue 和 vue 相互通讯方式&#xff1a;nvue注意事项&#xff1a;简介 uni-app是逻辑渲染分离的&#xff0c;渲染层在app端提供了两套排版引擎&#xff0c; 小程序方式的webview渲染和weex方式的原生渲染&#xff0c;两种渲染引入可以自己根据需要选。 vue文件走的…...

带头双向循环链表的实现

1.结构体的创建以及类型重定义 typedef int LTDataType; typedef struct ListNode {LTDataType data;struct ListNode* prev;struct ListNode* next; }LTNode;2.链表的初始化 这个函数用于创建节点&#xff0c;后面还会用到。 LTNode* BuyListNode(LTDataType x) {LTNode* n…...

大屏使用dv-digital-flop定时刷新显示总人数

本文在基础上进行改进&#xff0c;后端使用若依后端IofTV-Screen: &#x1f525;一个基于 vue、datav、Echart 框架的物联网可视化&#xff08;大屏展示&#xff09;模板&#xff0c;提供数据动态刷新渲染、屏幕适应、数据滚动配置&#xff0c;内部图表自由替换、Mixins注入等功…...

Java面向对象部分 个人学习记录

注:此博客是个人学习记录&#xff0c;会有错的地方&#xff0c;面向对象部分我可能会画很多图来加深我的理解 不引出了&#xff0c;直接开始 class Dog{String name;int age;String type;public Dog(String name,int age,String type){this.namename;this.ageage;this.typetyp…...

MySQL数据库——对Linux MySQL软件包的一些说明

Linux 操作系统的发行版很多&#xff0c;不同发行版下的 MySQL 版本也是不同的。MySQL 主要支持的 Linux 版本有 Red Hat Enterprise Linux 和 SUSE Linux Enterprise Server。这里主要介绍不同 Linux 发行版下 MySQL 支持的版本。 Linux 操作系统的 MySQL 软件包一般分为以下…...

【JavaEE进阶】——第二节.Spring核心和设计思想

文章目录 前言 一、Spring是什么&#xff1f; 二、什么是容器&#xff1f; 三、什么是IoC? 3.1 初始loC 3.2 举例解释loC 3.3 Spring IoC思想的体现 四、什么是DI&#xff1f; 4.1DI的概念 4.2 Ioc和DI的区别 总结 前言 今天我们将进入到有关spring的认识当中&…...

twitter开源算法(1)For You推荐系统架构

1 Twitter’s Recommendation Algorithm 我们的推荐系统由许多互相关联的服务(services)和工作&#xff08;jobs&#xff09;组成,本节这要是聚焦home timeline的for you feed流。 the-algorithm开源地址&#xff1a;https://github.com/twitter/the-algorithm 本篇博客来源&…...

A General Framework for Uncertainty Estimation in Deep Learning源码阅读(二)

接上文 ResNet定义&#xff1a; 代码使用 def ResNet18ADF(noise_variance1e-3, min_variance1e-3):return ResNet(BasicBlock, [2,2,2,2], num_classes10, noise_variance1e-3, min_variance1e-3, initialize_msraFalse)定义模型&#xff0c;其中ResNet定义为&#xff1a; …...

串行通信协议---HART协议

实际应用中&#xff0c;HART协议是仅次于Modbus协议的最接近统一现场总线的标准&#xff0c;主要是在4~20mA电流信号上面叠加数字信号&#xff0c;物理层采用Bell 202标准的FSK技术成功实现模拟信号和数字信号双向同时通信而互不干扰。HART协议规定了传输的物理形式、消息结构、…...

【独家】华为OD机试 - 寻找密码(C 语言解题)

最近更新的博客 华为od 2023 | 什么是华为od,od 薪资待遇,od机试题清单华为OD机试真题大全,用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为od机试,独家整理 已参加机试人员的实战技巧本期题目:寻找密码 题目 小王在进行游…...

FPGA有哪些优质的带源码的IP开源网站?

这是某乎上的一个问题&#xff0c;我觉得还不错&#xff0c;今天就系统性的总结一下1、fpga4funhttps://www.fpga4fun.com/你能在这个网站上找到什么&#xff1f;您可以找到信息页面&#xff0c;以及使用 FPGA 板构建的 FPGA 项目。注重点&#xff1a;项目。FPGA 项目使用一种称…...

基于模型预测控制(MPC)的微电网调度优化的研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

Postman接口测试之Mock快速入门

一、Mock简介 1.Mock定义 Mock是一种比较特殊的测试技巧&#xff0c;可以在没有依赖项的情况下进行接口或单元测试。通常情况下&#xff0c;Mock与其他方法的区别是&#xff0c;用于模拟代码依赖对象&#xff0c;并允许设置对应的期望值。简单一点来讲&#xff0c;就是Mock创建…...

分享一个国内可用的免费ChatGPT网站

背景 ChatGPT作为一种基于人工智能技术的自然语言处理工具&#xff0c;近期的热度直接沸腾&#x1f30b;。 作为一个程序员&#xff0c;我也忍不住做了一个基于ChatGPT的网站&#xff0c;免费&#xff01;免登陆&#xff01;&#xff01;国内可直接对话ChatGPT&#xff0c;也…...

15. 三数之和(Java)

给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组。 示例 …...

Navicat Premium 16安装教程

1.鼠标右击【Navicat Premium 16(64bit)】压缩包&#xff08;win11及以上系统需先选择“显示更多选项”&#xff09;选择【解压到 Navicat Premium 16(64bit)】。 2.打开解压后的文件夹&#xff0c;鼠标右击【setup】选择【以管理员身份运行】。 3.点击【下一步】。 4.选择【我…...

蓝桥杯刷题冲刺 | 倒计时8天

作者&#xff1a;指针不指南吗 专栏&#xff1a;蓝桥杯倒计时冲刺 &#x1f43e;马上就要蓝桥杯了&#xff0c;最后的这几天尤为重要&#xff0c;不可懈怠哦&#x1f43e; 文章目录1.三角形的面积2.图中点的层次1.三角形的面积 题目 链接&#xff1a; 三角形的面积 - 蓝桥云课 …...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)

在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...

高端性能封装正在突破性能壁垒,其芯片集成技术助力人工智能革命。

2024 年&#xff0c;高端封装市场规模为 80 亿美元&#xff0c;预计到 2030 年将超过 280 亿美元&#xff0c;2024-2030 年复合年增长率为 23%。 细分到各个终端市场&#xff0c;最大的高端性能封装市场是“电信和基础设施”&#xff0c;2024 年该市场创造了超过 67% 的收入。…...