您的位置 首页 > 腾讯云社区

react中使用jsonp调用百度天气API,高德API---用户4344670

安装cnpm install jsonp --save以下是封装的代码import jsonP from 'jsonp' export default class Axios { static jsonp(options) { return new Promise((resolve, reject) => { jsonP(options.url, { // jsonp的原理是什么? // 用于指定回调的查询字符串参数的名称 param: 'callback' }, function (err, response) { if (response.status == 'success') { resolve(response) } else { reject(response.message); } }) }) } static go() { console.log(" gon "); } }在组件中使用,必须先引用import Hp from './tool'; getJsonp() { console.log("jsonp"); Hp.jsonp({ // 以前的天气百度ak 3p49MVra6urFRGOT9s8UBWr2 特别注意: 新用户没有百度地图免费api的权限 url: 'http://api.map.baidu.com/telematics/v3/weather?location=深圳&output=json&ak=3p49MVra6urFRGOT9s8UBWr2' // 高德的ak d325c2029eb25fb18127449297f12cfb // url: 'https://restapi.amap.com/v3/weather/weatherInfo?city=深圳&key=d325c2029eb25fb18127449297f12cfb' }).then(res => { // 以下示例为百度天气API let data = res.results[0]; let currentCity = res.currentCity;// 城市 let lists = data.weather_data;/// 天气列表 lists.map((item, i) => { item.key = i; }) console.log(lists); let weather_data = data.weather_data[0];// let dayPictureUrl = weather_data.dayPictureUrl;/// 图片 let weather = weather_data.weather;// 天气 let date = weather_data.date.substr(0, 2); console.log(dayPictureUrl) this.setState({ dayPictureUrl, weather, date, lists }, () => { console.log(this.state.arrList2); console.log(this.state.arrList2[0].date); }) }); Hp.go(); } componentWillMount() { this.getJsonp(); } ---来自腾讯云社区的---用户4344670

关于作者: 瞎采新闻

这里可以显示个人介绍!这里可以显示个人介绍!

热门文章

留言与评论(共有 0 条评论)
   
验证码: