javascript - React 获取多个相互依赖的 API (async/await)

Question

我正在做一个项目，我遇到了这个错误

“response.json 不是函数”

从第一个 API 调用中获取数据后，我可以得到纬度和经度。但是在我将第二个 API 嵌套到第一个 API 之后，问题就出现了。

我不确定我在这里做错了什么。无论 API 是否相互依赖，有什么方法可以解决这个问题？提前致谢

const Form = () => {

  const [search, setSearch] = useState('')
  const [location, setLocation] = useState('')
  // const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    geocode()

  }, [location])

  const geocode = async () => {
    if(location) {
      const response = await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${location}.json?limit=1&access_token=${ACCESS_TOKEN}`)
      const data = await response.json()
      const lat = data.features[0].center[1]
      const log = data.features[0].center[0]
      console.log(data.features[0].center[1], data.features[0].center[0])
      forecast(lat,log)
    }
  }

  const forecast = async (latitude, longitude) => {
    const response = await `https://api.darksky.net/forecast//${API_KEY}/${latitude},${longitude}`
    const data = await response.json()
    console.log(data)
  }

  const getSubmit = e => {
    e.preventDefault()
    setLocation(search)
    setSearch('')
  }

  return (
    <form onSubmit={getSubmit}>
      <input 
        type="text"
        name="location"
        value={search}
        onChange={e => setSearch(e.target.value)}
        placeholder="Enter Location..."/>
      <button type="submit">Get weather!</button>
    </form>
  )
}

标签： javascripthtmlcssreactjs

Answer 1

你实际上并没有发送你的请求，

await `https://api.darksky.net/forecast//${API_KEY}/${latitude},${longitude}`

它应该是

await fetch(`https://api.darksky.net/forecast//${API_KEY}/${latitude},${longitude}`)