如何使用 axios 从 openweathermap 调用当前温度

Question

I am trying to do an axios call to get the latest temperature using openweatherapi. However for some reason I cant find out why my axios call is not working. Any help would be great, here is my code:

function Overview() {
    const appState = useRef(AppState.currentState);
    const [count, setCount] = useState(0);
    const [active, setActive] = useState(false);
    const [latitude, setLatitude] = useState(0);
    const [longitude, setLongitude] = useState(0);
    const [temperature, setTemperature] = useState('');
    const API_KEY = '{apikey}';

    const getLocationAsync = async () => {
        let {status} = await Location.requestForegroundPermissionsAsync();
        if (status !== 'granted') {
            console.log('Location Permission Error')
        }

        const loc = await Location.getCurrentPositionAsync({});

        setLatitude(loc.coords.latitude);
        setLongitude(loc.coords.longitude);
    }

    const getTemperature = async () => {
        const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`;
        const response = await axios.get(encodeURI(url));
        const temp = await response.data?.main?.temp;
        setTemperature(temp);
    }

    useEffect(() => {
        appState.current.match('active') ? setActive(true) : setActive(false)
        active && setInterval(() => setCount((oldCount) => oldCount + 1), 60000);
        getLocationAsync();

        return () => {
            clearInterval();
        };
    }, [active]);

    useEffect(() => {getTemperature()}, [longitude, latitude])

    return (
        <View style={{margin: 32}}>
            <View style={{marginBottom: 32}}>
                <Text style={{fontSize: 36, fontFamily: 'Roboto_400Regular'}}>Great!</Text>
                <Text style={{fontSize: 16, color: '#878787', fontFamily: 'Roboto_400Regular'}}>Average mood 23%</Text>
            </View>
            <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                <OverviewContainer title="Weather" value={temperature ? temperature : "no data"} />
                <OverviewContainer title="Time on app" value={secondsToHms(count)} />
            </View>
        </View>
    );
}

Any advice on what im doing wrong would be great!

Answer 1

You should change your getWeather function to the following.

const getWeather = async () => {
    const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${api_key}`);
    setData(response.data.main.temp);
};

Answer 2

You can get the data using encodeURI() function.

const getWeather = async () => {
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}`;
    const response = await axios.get(encodeURI(url));
    const temp = await response.data?.main?.temp;
    setData(temp);
}

Answer 3

You can call your getWeather function like below:

const getWeather = () => {
             axios.get(`https://api.openweathermap.org/data/2.5/weather? 
                  lat=${latitude}&lon=${longitude}&appid=${api_key}`)
            .then((response)=>setData(response.data.main.temp))
            .catch((err)=> consol.log(err))
                         }