使用fetch()异步请求API数据实现汇率转换器
创始人
2025-05-30 22:59:09

任务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; ires.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美元,可以在…国家使用
在这里插入图片描述

相关内容

热门资讯

“代抢票”背后的灰色产业链 抢... “演出经济”蓬勃发展,举办各类演唱会、音乐节等成为各地提升旅游收入、提振消费的“新密码”,热门艺人演...
Vue入门+DRF项目实战-0... 1. 引入Django REST framework 在本章中,我们要大家介绍为什么学习Django...
「VScode」通过VScod... 前言 之前在git的版本管理上,我使用的是sourcetree,说实话...
油价继续下跌?欧佩克宣布将再度... 5月31日,欧佩克线上会议讨论7月增产事宜,同意41.1万桶/日的大规模增产计划。当前,国内化工产业...
在生产计划项目中使用甘特图的5... 在生产计划中,会不断接收很多的订单项目,这时候就需要能够合理安排时间、资...
NOA渗透率超5%?智能汽车赛... 从L2到高速NOA(导航辅助驾驶),再到城区NOA...
赴港上市再添“新军”,背后有茅... 近日,资本市场再度迎来新动态,两家新三板摘牌公司 —— 先通医药与华曦达先后迈向港交所递表,计划转道...
小小科技八年磨剑IPO 第一个... 《投资者网》张伟5月,汽车零部件生产商安徽省小小科技股份有限公司(下称“小小科技”或“公司”)披露了...
精测转2上市价格预测 精测转2基本信息转债名称:精测转2,评级:AA-ÿ...
欧佩克宣布,再度增产! 5月31日,欧佩克线上会议讨论7月增产事宜,同意41.1万桶/日的大规模增产计划。 据新华财经5月3...
js常用循环方式 let list = [{name:'张三',age:22},{name:'李四',age:...
nvmf代码分析 nvmf代码分析NVMf RPC接口文件1、创建RDMA Port监听2、创建NVMf链接nvmf_...
【微服务】—— Nacos设计... 文章目录一、简介Nacos起源Nacos 定位Nacos 优势二、Nacos 总体设计1࿰...
axios 请求其他服务器地址... 场景还原: Vue2项目中在生产环境调用其他服务器请求地址时候会在请求地址默认加上一串当前浏览器域...
一斤便宜10元还要降?榴莲可以... 最近几年,各种知名水果的价格可以说都出现了比较大的变化,特别是最近榴莲的价格持续下降,甚至还有降价的...
图解redis对象(hash ... 哈希表 哈希对象的编码可以是ziplist或者hashtable 条件 ·哈希对象保存的所有键值对的...
C语言再学习 -- C 标准库... 参看:C 标准库 - stdlib.h C 标准库 - 简介 stdlib .h 头...
欧佩克+连续第三次大幅增产,油... 欧佩克连续第三次大幅增产,这一举措无疑给油价带来了巨大压力,恐使其承压下跌。欧佩克作为全球重要的石油...
python 安装包相关命令 查看匹配的版本(大小写敏感)pip -V 查询已经安装了的包,并可以显示相应的版本&...
“2025外贸优品中华行——天... 中新网天津5月31日电 (记者 王君妍)31日,“2025外贸优品中华行—天津站”活动正式启幕。本次...
基于SpringBoot+Vu... 您好,我是码农飞哥,感谢您阅读本文,欢迎一键三连哦。 &#...
网络技巧|远程桌面连接不上的多... 写在前面的话专注于网络各种技巧和实用工具的分享,都是日常工作中遇到的大大小小问题记录下...
IM即时通讯软件系统源码安卓、... demo软件园每日更新资源,请看到最后就能获取你想要的: ​ 1.《计算机系统结构:解...
讲解一下关于MySQL数据库的... 对于数据库,市面上有着不少的数据库!比如:Oracle数据...
3.1.2数据库体系结构:分布... 3.1.2数据库体系结构:分布式数据库、分布式数据库特点、分布式数据库结构、数据分片、...
学习streamlit-6 系列目录 学习streamlit-1,简介学习streamlit-2,s...
冒泡 VS 插入 VS 选择—... 文章目录什么样的“排序算法”更加优质?排序算法的执行效率排序算法的内存消耗排序算法的稳...
Python 多线程 文章目录一、简介1.1 多线程的特性1.2 GIL二、线程1.2 单线程1.3 多线程三、线程池3....
基于树莓派实现超声波测距 目录 一,写在前面 二,超声波模块说明 ● 模块基本参数 ● IO口接线...
Linux(网络基础---数据... 文章目录0. 前言1. 以太网的帧格式2. 再谈局域网原理3. 汇总整体通信流程,补全...