如何在运行 fetch 之前等待值？

Question

编辑：我最终使用 axios 而不是 fetch，效果很好。只是删除了response.json()并将fetch切换到axios.get。

我在这里发表的第一篇文章可能是一个非常简单的问题。我试图在将纬度和经度值输入 URL 之前将其变为实际值。大多数时候，我会因错误请求而返回错误，因为纬度和经度值尚未传播。

谢谢！

代码在这里（编辑掉 API 密钥）：

    const fetchData = async () => {
      navigator.geolocation.getCurrentPosition(function (position) {
        setLat(position.coords.latitude);
        setLong(position.coords.longitude);
      });


      const url =
        await `https://api.openweathermap.org/data/2.5/weather/?lat=${lat}&lon=${long}&units=metric&APPID=DELETED`;
     
      await fetch(url)
        .then((response) => {
          return response.json();
        })
        .then((result) => {
          setData(result);
        })
        .catch(console.error);
    };

    fetchData();
  }, [lat, long]);

Answer 1

看来纬度和经度是使用它们在 useEffect 中设置的。您可能应该在另一个 useEffect 中使用它们之前设置它们。

useEffect(() => {
      navigator.geolocation.getCurrentPosition(function (position) {
        setLat(position.coords.latitude);
        setLong(position.coords.longitude);
      });
}, [])

useEffect(() => {
  const fetchData = async () => {

      const url = `https://api.openweathermap.org/data/2.5/weather/?lat=${lat}&lon=${long}&units=metric&APPID=DELETED`;
     
      await fetch(url)
        .then((response) => {
          return response.json();
        })
        .then((result) => {
          setData(result);
        })
        .catch(console.error);
    };

    if (lat && long) {
      fetchData();
    }
  }, [lat, long]);