Javascript 处理依赖承诺：未处理的拒绝（ReferenceError）无法在初始化之前访问第二个承诺

我尝试在客户端使用axios处理依赖承诺

const App=()=>{
     useEffect(()=>{
             onTermSubmit()
       },[])
 
     const onTermSubmit=async(term)=>{
       if (term) {
        const responseLongLat = await opencage.get(
                    `/geocode/v1/json/?q=${term}&key=myKey` 
                 //This makes a request to opencage API and return a object with 
                 // longitud and latitude
                        );
          
       console.log(responseLongLat.data.results[0].geometry);//{lat: 52.5170365, lng: 13.3888599}

        const responseWeather = await darksky.get(
            `/forecast/myKey/${responseLongLat.lat},${responseLongLat.lng}`
                // This makes a resquest to DarkSky API and return a object with 
                // weather data
           );
         console.log(responseWeather.data.daily);//{summary: "Rain on Thursday through next Saturday.", icon: "rain", data: Array(8)} if hardcoded lat, long; otherwise error

      };

        return (
               <div>
                   <SearchBar onFormSubmit={onTermSubmit} />
               </div>
          )
 }

const-App=（）=>{
useffect（（）=>{
ontermsmit（）
},[])
const ontermsmit=async（term）=>{
如果（任期）{
const responseLongLat=等待opencage.get(
`/geocode/v1/json/？q=${term}&key=myKey`
//这会向opencage API发出请求，并返回一个包含
//经纬度
);
console.log（responseLongLat.data.results[0].geometry）；/{lat:52.5170365，lng:13.3888599}
const responsewather=wait darksky.get(
`/forecast/myKey/${responseLongLat.lat}，${responseLongLat.lng}`
//这将对DarkSky API进行重新搜索，并返回一个带有
//天气数据
);
console.log（responsewather.data.daily）；/{摘要：“周四到下周六下雨”，图标：“雨”，数据：数组（8）}如果硬编码lat，则为long；否则为错误
};
返回(
)
}

首先，我得到了一个CORS策略错误，我想我已经克服了这个错误，将其前置到DarkSky的主域。如果我用特定的数据（e.j:52.5170365，13.3888599）对纬度和经度进行硬编码，它会起作用，我得到了这么长时间的天气数据，lat

但是如果我将变量放入从responseLongLat（${responseLongLat.lat}，${responseLongLat.lng}）派生的对DarkSky的请求的文本字符串中，我会得到以下错误：

---

未处理的拒绝（ReferenceError）：在初始化之前无法访问“ResponseWither”

您只能在异步函数中使用Wait。请尝试此操作

async function getWeatherData(term) {
 const responseLongLat = await opencage.get(
`/geocode/v1/json/?q=${term}&key=myKey` 
  //This makes a request to opencage API and return a object with 
  // longitud and latitude
  );

console.log(responseLongLat.data.results[0].geometry);//{lat: 52.5170365, lng: 
13.3888599}

const responseWeather = await darksky.get(
 '/forecast/myKey/52.5170365,13.3888599'
 // This makes a resquest to DarkSky API and return a object with 
 // weather data
);

console.log(responseWeather.data.daily);

}

if(term) {
    getWeatherData(term);
}

---

解决方案是，我们需要将第一个API调用中返回对象的属性直接传递给第二个API调用的文本模板，而不是将它们存储在两个单独的变量中。这些变量就是我们传递给文本模板的变量

 const responseLongLat = await opencage.get(
                `/geocode/v1/json/?q=${term}&key=myKey`)

 let responseWeatherLat = responseLongLat.data.results[0].geometry.lat;
 let responseWeatherLng = responseLongLat.data.results[0].geometry.lng;

 const responseWeather = await darksky.get(
 `/forecast/2623794cbf06a05c50f681a0869ab7ab/${responseWeatherLat},${responseWeatherLng}`
  );

---

在您发布的代码中，您从未访问过

responsewather

任何地方。我使用console.log记录两个请求的结果以进行检查。我使用这些console.log更新了代码并放置了它们的结果。我使用async关键字放置了完整的函数。该函数位于React应用程序的组件中，需要使用参数：term。参数是从另一个组件传递的，它是用户介绍城市（术语）的形式并将提交的术语作为道具传递给主组件，其中是上述函数。因此，我们需要函数中的参数。相应地更新了我的答案。您好，感谢您遵循我的代码。实际上，我正在使用挂钩，尤其是useEffect挂钩来检索API。因此，传递给SearchBar组件引用onTermSubmit的prop，但是这个异步func在useEffect钩子中。我应该将这个术语传递给钩子中的主函数吗？你应该将这个函数放在useEffect钩子之外。然后从钩子中调用它。是的，这是我在更新中已经做过的唯一的一点是，当来自搜索栏的术语被传递到async func中的参数时，条件应该在该参数内。