Question

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

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

感谢您的每一次回复，您始终可以救我<3

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)
                  })
              })

    }
  }

Answer 1

它在两个地方坏了：

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) => {
          // *** RETURN WAS MISSING HERE! ***
          return 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}`)
            // *** RETURN WAS MISSING HERE AS WELL! ***
            return data1.then((res)=>res.json())
                .then(resultThree=>{
                    console.log(resultThree)
                })
            })

  }
}

此外，使用async / await可大大提高代码的可读性：

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

const search = async evt => {
  if (evt.key === 'Enter') {
    try {
      const forecastResponse = await fetch(`${api.base}forecast?q=${query}&units=metric&APPID=${api.key}`)
      const forecastResult = await forecastResponse.json()
      setWeather(forecastResult)
      setQuery('')
      console.log(forecastResult)

      const onecallResponse = await 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 = await fetch(`${api.base}aggregated/day?lat=${onecallResult.lat}&lon=${onecallResult.lon}month=${moment().format('M')}&day=${moment().format('D')}&units=metric&APPID=${api.key}`)
      const aggregatedResult = await aggregatedResponse.json()
      console.log(aggregatedResult)
    } catch (e) { // Catch error to avoid unhandled promise rejection
      console.error(e)
    }
  }
}

Answer 2

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

破损的承诺链“然后”

2 个答案: