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

• 2020 年 3 月 27 日
• 筆記

• 安装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();  }