import jsonp from 'jsonp'
import { message } from 'antd'
import { useEffect, useState } from 'react'
export function Weather() {
const POSITION_NAME = '城市名称'
const [weatherStr, setWeatherStr] = useState<string>('')
const [iconName, setIconName] = useState<string>('')
useEffect(() => {
getWeather()
}, [])
const getWeather = () => {
return new Promise((resolve, reject) => {
const url = `https://restapi.amap.com/v3/weather/weatherInfo?key=94d1cfc75900384b746b89edfea5fb1a&city=城市名称`
jsonp(url, {}, (err, data) => {
if (data.status === '1') {
//请求成功,拿到数据
const { weather, city, temperature } = data.lives[0]
resolve({ weather, city, temperature })
let iconName = WEATHER_ICON_MAP[weather as string]?.day
let str = `${POSITION_NAME} ${weather} ${temperature}℃`
setIconName(iconName)
setWeatherStr(str)
} else {
//请求失败
message.error('获取天气信息失败!')
}
})
})
}
}
react 使用jsonp调高德天气API
于 2023-12-08 14:47:13 首次发布