Reactjs “承诺链断裂”；然后"；

我又来了，还有一个问题。我的承诺链在什么地方断了，但我不知道为什么。 我的任务是使用第二个API中的信息获取第一个API（成功），第二个API（成功），然后第三个API。这里是我的密码失效的地方。控制台显示“resultTwo”无效

为什么我要用同样的逻辑？ 如何以“干净的方式”重复第三次调用（我需要在5天内调用第三个API）

---

谢谢你的每一个回复，你总是帮我保存它有两处损坏：

const[query，setQuery]=useState（“”）
const[weather，setWeather]=useState（{}）
const[details，setDetails]=useState（{}）
const search=evt=>{
如果（evt.key==“输入”）{
fetch（`api.base}预测？q=${query}&units=metric&APPID=${api.key}`）
.then（res=>res.json（））
。然后（结果=>{
天气（结果）；
setQuery（“”）；
控制台日志（结果）；
返回结果；
})
。然后（（结果）=>{
//***此处缺少退货***
返回fetch（`${api.base}onecall？lat=${result.city.coord.lat}&lon=${result.city.coord.lon}&units=metric&APPID=${api.key}`）
.然后（（res）=>res.json（））
。然后（resultTwo=>{
设置详细信息（结果二）
console.log（resultTwo）
返回结果2
})
})
。然后（（resultTwo）=>{
const data1=fetch（`${api.base}聚合/天？lat=${resultTwo.lat}&lon=${resultTwo.lon}月=${moment（）.format（“M”）}&day=${moment（）.format（“D”）}&units=metric&APPID=${api.key}）
//***此处也缺少退货***
返回data1.then（（res）=>res.json（））
。然后（结果三=>{
console.log（结果三）
})
})
}
}

此外，使用

async

/

await

，代码的可读性也可以大大提高：

const[query，setQuery]=useState（“”）
const[weather，setWeather]=useState（{}）
const[details，setDetails]=useState（{}）
常量搜索=异步evt=>{
如果（evt.key=='Enter'）{
试一试{
const forecasteresponse=wait fetch（`${api.base}预测？q=${query}&units=metric&APPID=${api.key}`）
const forecastResult=wait forecastressponse.json（）
setWeather（预报结果）
setQuery（“”）
console.log（forecastResult）
const onecallResponse=wait fetch（`${api.base}onecall？lat=${forecastResult.city.coord.lat}&lon=${forecastResult.city.coord.lon}&units=metric&APPID=${api.key}）
const onecallResult=await onecallResponse.json（）
setDetails（onecallResult）
console.log（onecallResult）
const aggregatedResponse=wait fetch（`api.base}aggregated/day？lat=${onecallResult.lat}&lon=${onecallResult.lon}month=${矩（）.format（'M'）}&day=${矩（）.format（'D'）}&units=metric&APPID=${api.key}）
const aggregatedResult=await aggregatedResponse.json（）
console.log（aggregatedResult）
}catch（e）{//catch错误以避免未处理的承诺拒绝
控制台错误（e）
}
}
}

尝试使用异步，等待以避免链。您可以从api为getdata创建通用方法。这将有助于解决您的问题。

您可能应该使函数

async

，并将它们包装在

Promise.all（）

中，以聚合它们的结果。是的，我知道async/wait可能更容易，但您是否有任何示例？当我需要同时将数据从一个api传递到另一个api时，我对这个异步代码感到迷茫，它变得有点混乱；dTry here@k-wasilewski这是不可能的，因为这三个请求相互依赖，所以它们必须按顺序完成。哇，太棒了。非常感谢你！太棒了，安妮，正是我需要的@CherryDT这是一个愚蠢的问题，但为什么我们需要在这些地方“返回”呢？因为在传入

然后

的回调中，可以返回一个值或一个承诺，然后解析为一个值，这将是传入下一个

然后

回调的内容。如果您返回了一个承诺，那么在调用下一个处理程序及其解析值之前，将等待它。

const [query, setQuery] = useState('');
  const [weather, setWeather] = useState({});
  const [details, setDetails] = useState({})



 const search = evt => {
    if (evt.key === "Enter") {
      fetch(`${api.base}forecast?q=${query}&units=metric&APPID=${api.key}`)
        .then(res => res.json())
        .then(result => {
          setWeather(result);
          setQuery('');
          console.log(result);
          return result;
        })
        .then((result) => {
           fetch(`${api.base}onecall?lat=${result.city.coord.lat}&lon=${result.city.coord.lon}&units=metric&APPID=${api.key}`)
            .then((res)=>res.json())
            .then(resultTwo =>{
                setDetails(resultTwo)
                console.log(resultTwo)
                return resultTwo
              })
          })
            .then((resultTwo) => {
              const data1 = fetch(`${api.base}aggregated/day?lat=${resultTwo.lat}&lon=${resultTwo.lon}month=${moment().format("M")}&day=${moment().format("D")}&units=metric&APPID=${api.key}`)
              data1.then((res)=>res.json())
                  .then(resultThree=>{
                      console.log(resultThree)
                  })
              })

    }
  }