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>