React通过jsonp获取高德在线天气数据

使用jsonp请求，首先安装一下 jsonp

yarn add jsonp

在项目里的api文件夹下的index.js文件里写一下代码

import { message } from "antd"; //这个是引用的antd前端组件库
import jsonp from "jsonp";

//请求高德天气
export const reqWeather = (city)=>{

    return new Promise((resolve,reject)=>{
        const url = `https://restapi.amap.com/v3/weather/weatherInfo?key=72999d8b7494cbdcf6b1851224fe779a&city=${city}`
        jsonp(url,{},(err,data)=>{
            // console.log("reqWeather=",err,data);
            if(data.status==="1"){
                //请求成功，拿到数据
                const {weather,city,province,temperature} = data.lives[0]
                resolve({weather,city,province,temperature})
            }else{
                //请求失败
                message.error("获取天气信息失败!")
            }
        })
    })
}

//请求郑州天气
//reqWeather("郑州")

在用到的组件里引入

import {reqWeather} from "../../api/index"

请求使用即可

 getWeatherNow = async ()=>{
        const {weather,city,province,temperature} = await reqWeather("郑州")
        this.setState({weather,city,province,temperature})
    }