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