当前位置：首页 > article >正文

关于Promise的小测验

article 2025/1/2 22:45:14

关于Promise的小测验

题目

// 编码挑战 #1

/*

在这个挑战中，你将构建一个函数 ‘whereAmI’，该函数仅基于 GPS 坐标显示国家信息。为此，你将使用第二个 API 来对坐标进行地理编码。

以下是你的任务：

第一部分

创建一个函数 ‘whereAmI’，该函数接收纬度值（lat）和经度值（lng）作为输入（这些是 GPS 坐标，示例如下）。

对提供的坐标进行“逆地理编码”。逆地理编码的意思是将坐标转换为有意义的位置，比如城市和国家名称。使用这个 API 进行逆地理编码：https://geocode.xyz/api。使用此格式的 URL 进行 AJAX 调用：https://geocode.xyz/52.508,13.381?geoit=json。使用 fetch API 和 promise 来获取数据。不使用我们创建的 getJSON 函数，那是作弊 😉

一旦你有了数据，查看控制台中接收到的所有关于该位置的属性。然后，使用这些数据，在控制台上记录这样的消息：‘You are in Berlin, Germany’

在 promise 链的末尾链接一个 .catch 方法，并将错误记录到控制台

这个 API 每秒允许你进行 3 次请求。如果你快速重新加载，你将得到代码为 403 的错误。这是请求的错误。记住，fetch() 在这种情况下并不会拒绝 promise。因此，创建一个错误来自己拒绝 promise，并提供有意义的错误信息。

第二部分

现在是时候使用接收到的数据来显示国家信息了。因此，从地理编码 API 结果中获取相关属性，并将其插入到我们一直在使用的国家 API 中。

显示国家信息并捕获任何错误，就像我们在上一课中所做的那样（你甚至可以复制这段代码，无需重新输入相同的代码）

测试坐标 1：52.508, 13.381（纬度，经度）

测试坐标 2：19.037, 72.873

测试坐标 3：-33.933, 18.474

祝你好运 😀

*/

由于geocode在国内无法访问，所以在这里更换了一种逆地址编码API，名字叫opencage，大家可以试一下，注册即可使用，也可以自己寻找一个类似的API，国内有很多类似的API都可以使用

代码示例

//因为opencage中国地区输出的国家名称是中文的，所以这里使用一个简单的对象映射来处理一下
function translateCountryToEnglish(country) {
  const translations = {
    德国: 'Germany',
    印度: 'India',
    南非: 'South Africa',
  };

  return translations[country] || 'Translation not available';
}

function whereAmI(lat, lng) {
//通过fetch请求API，并将经纬度参数上传
  fetch(
    `https://api.opencagedata.com/geocode/v1/json?q=${lat}%2C${lng}&key=e604731002c3488db7706af06a8c693c`
  )
//下面的手动抛出错误不一定有效，看了一下返回，好像并没有ok的这个参数
    .then(res => {
      if (!res.ok) throw new Error(`数据获取失败！😟`);
      return res.json();
    })
//拿到response，传递给data，并由data中提取我们需要的数据
    .then(data => {
      console.log(data);
      console.log(
        `你在${data.results[0].components.country}的${data.results[0].components.city}`
      );
//下面的代码从之前的demo中直接复制过来的，使用另一个api请求国家的信息
      return fetch(
        `https://restcountries.com/v2/name/${translateCountryToEnglish(
          data.results[0].components.country
        )}`
      );
    })
    .then(res => {
      if (!res.ok) throw new Error(`国家不存在(${res.status})`);

      return res.json();
    })
    .then(data => renderCountry(data[0]))
//捕获错误
    .catch(err => console.error(`${err.message}😟`));
}
//测试数据
whereAmI(52.508, 13.381);
whereAmI(19.037, 72.873);
whereAmI(-33.933, 18.474);