react中跨域請求天氣預報接口數據

背景故事：同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，
如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，
瀏覽器只是針對同源策略的一種實現。
現在所有支持JavaScript 的瀏覽器都會使用這個策略。
所謂同源是指，域名，協議，端口相同。
當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面
當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪個頁面的，
即檢查是否同源，只有和百度同源的腳本才會被執行。
如果非同源，那么在請求數據時，瀏覽器會在控制台中報一個異常，提示拒絕訪問。
頁面展示：
我們頁面上會展示一個日期時間及天氣情況，我們怎么實現這兩個功能呢？
1:關於日期：我用一個工具類來封裝我們的日期函數，最后再頁面上再調用
新建utils文件夾及utils文件，我們導出一個formate函數

export default {
  formateDate(time){
    if(!time)return '';
    let date=new Date(time)
    return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+'--'+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
  }
}

希望在我們的頁面上展示這個日期函數，我們需要

  componentWillMount(){
    this.setState({
      userName:'jser'
    })
    setInterval(()=>{
      let sysTime=Util.formateDate(new Date().getTime())
      this.setState({
        sysTime
      })
    },1000)
  }

<span className="date">{this.state.sysTime}</span>

關於天氣的展示，我們用到了百度天氣api，它的使用就是通過請求http://api.map.baidu.com/telematics/v3/weather?location。。。獲取數據。
這個時候，我的瀏覽器環境是本地的URL地址，我怎么能夠請求到百度的地址呢？又不是同源的。這個時候，就要用到我們的jsonp了。
通過yarn add jsonp --save
我們來對jsonp方法做一封裝,讓所有地方都能使用

import JsonP from 'jsonp'
export default class Axios{
  static jsonp(options){
    return new Promise((resolve,reject)=>{
      JsonP(options.url,{
        param:'callback'
      },function(err,response){
        if(response.status=='success'){
          resolve(response)
          console.log(response)
        }else{
          reject(response.message)
        }
      })
    })
  }
}

我們通過import axios from '../../axios'引入這個文件,封裝我們的jsonp方法，接着在我們的項目中使用

  getWeatherAPIData(){
    let city="深圳"
    axios.jsonp({
    url:'http://api.map.baidu.com/telematics/v3/weather?location='+encodeURIComponent(city)+'&output=json&ak='神奇
    }).then((res)=>{
      //項目公共機制
      console.log(res)
      if(res.status=='success'){
        let data=res.results[0].weather_data[0];
        this.setState({
          dayPictureUrl:data.dayPictureUrl,
          weather:data.weather
        })
      }
    })
  }

接着讓數據展示即可

<img src={this.state.dayPictureUrl} alt=""/>
</span>
<span className="weather-detail">
{this.state.weather}
</span>