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

时间:2022-05-17 01:21: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:1102
      throw 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).result
    if(!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数据实现汇率转换器