Vanilla JS调用Accuweather API报data未定义，如何通过定位API调用其他接口

核心错误原因 #

你遇到的ReferenceError: data not defined报错，是因为data是fetch第二个.then回调的局部入参，作用域仅局限在该回调的大括号内部，你在回调外部访问该变量就会触发未定义错误。

现有代码其他问题 #

• 变量名不匹配：开头声明的是long、lat变量，后续赋值用的是longitude、latitude，导致拼接API地址时lat、long都是undefined，接口请求直接失败
• API地址参数错误：AccuWeather geoposition搜索接口的坐标参数名为q，你把API密钥末尾字符和参数名搞混了，缺失了q参数
• 协议兼容问题：如果你的站点是HTTPS协议，调用HTTP接口会被浏览器跨域拦截，需要改成HTTPS开头的接口地址

修复后代码 #

// 页面加载完成后获取定位
window.addEventListener('load', () => {
  let long;
  let lat;

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {
      // 修正变量名匹配
      long = position.coords.longitude;
      lat = position.coords.latitude;

      // 修正API地址参数、协议
      const api = `https://dataservice.accuweather.com/locations/v1/cities/geoposition/search?apikey=tKaw1CfZNYzIxjfRsxVph6&q=${lat},${long}`;
      
      fetch(api)
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          // 所有需要用到data、需要调用后续接口的逻辑都写在这里
          console.log('定位接口返回结果：', data);
          // 从返回结果里取LocationKey，用于调用后续天气接口
          const locationKey = data.Key;
          // 后续接口调用逻辑写在这里
        })
        .catch((err) => {
          // 捕获接口请求错误
          console.error('接口调用失败：', err);
        });
    // 加用户拒绝授权定位的异常处理
    }, (err) => {
      console.error('获取定位失败：', err);
    });
  }
});

后续开发方向 #

• 先在控制台确认定位接口返回正常，拿到返回值里的Location Key，这是AccuWeather所有天气类接口的必填参数
• 所有依赖定位接口返回值的逻辑都写在上述data的作用域范围内，或者用async/await改写异步逻辑避免作用域问题
• 补充更多异常边界处理：比如接口返回报错码、返回数据为空的兼容逻辑

内容的提问来源于stack exchange，提问作者Neisa Adams