Javascript api端点依赖于另一个端点

我正在使用Mapbox，希望通过用户的IP地址根据用户的坐标显示位置。我使用了两个API来实现这一点，一个用来获取IP地址，第二个用来获取纬度和经度并插入Mapbox对象状态。我想知道，由于第一个api调用返回的数据将用作第二个端点中的参数，所以我能否在第一个api调用完成后运行一个api调用

 const [ip, setIp] = useState("");
  const [lat, setLat] = useState("");
  const [long, setLong] = useState("");
  
  useEffect(() => {
    getIP();
    getGeoloc();
  }, []);

  const getIP = async () => {
    const data = await fetch("https://api.ipify.org/?format=json");
    const response = await data.json();
    setIp(response.ip);
    console.log(response.ip);
  };

  const getGeoloc = async () => {
    const data = await fetch(
      `http://api.ipstack.com/${ip}?access_key=${KEY}`
    );
    const response = await data.json();
    setLat(response.latitude);
    setLong(response.longitude);
    console.log(response.latitude);
    console.log(response.longitude);
  };

  const [viewport, setViewport] = useState({
    width: 400,
    height: 400,
    latitude: lat,
    longitude: long,
    zoom: 8,
  });

---

是的，您只需要在第一个api返回时调用另一个api：

const getIP = async () => {
    const data = await fetch("https://api.ipify.org/?format=json");
    const response = await data.json();
    setIp(response.ip);
    const getGeoloc = async () => {
        const data = await fetch(
            `http://api.ipstack.com/${ip}?access_key=${KEY}`
        );
        const response = await data.json();
        setLat(response.latitude);
        setLong(response.longitude);
    };
};

很抱歉，如果这段代码是错误的，我只是想显示逻辑，我不使用TypeScript/CoffeScript编程。

您可以等待getIP（）完成获取，然后在useffect中使用async（）执行它

useEffect(() => {
     async getData() {
         await getIP();
         getGeoloc();
     }
     getData();
  }, []);