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>

巴特西

react中跨域请求天气预报接口数据

最新文章

热门文章