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

Posted 2023-04-01 尘世冒险家

任务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回调函数中捕获并打印出错误信息。

如果报错：

[e-mail]
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美元，可以在…国家使用

js fetch处理异步请求

以往一直认为异步请求只能使用原生js的XMLHttpRequest或jQuery的$.ajax()、$.post()等框架封装的异步请求方法

原来js还提供fetch来替代XMLHttpRequest，详情可见 https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

fetch 规格不同于  jQuery.ajax() 主要有两个方面牢记：

• 即使响应是HTTP 404或500，返回的Promise fetch() 也不会拒绝HTTP错误状态。相反，它将正常解析（ok状态设置为false），它只会拒绝网络故障或阻止要求完成。
• 默认情况下， 如果站点依靠维护用户会话（发送cookie，必须设置credentials init选项），  fetch 则不会发送或接收来自服务器的任何cookie，从而导致未经身份 验证的请求。

1 fetch(‘https://api-to-call.com/endpoint‘).then(response => {
2   if(response.ok){
3     return response.json();
4   }
5   throw new Error(‘Request failed!‘);
6 } , networkError => console.log(networkError.message)
7 ).then(jsonResponse => jsonResponse)