React 使用 fetch 请求天气

中国天气网（http://www.weather.com.cn）提供了查询天气的 API，通过传入城市 id， 可以获得当前城市的天气信息，API 相关信息如下：

规格	描述
主机地址	http://www.weather.com.cn
访问方法	GET
路径	data/cityinfo/{城市编号}.html
返回结果	JSON 格式，包含 city、temp1、temp2、weather等信息

 

 

 

 

 

 

返回结果格式如下：

在请求天气数据的时候有几个问题需要注意：

1. 使用浏览器原生支持的 fetch 函数来请求 api，同时为了解决跨域问题，需要在项目的 package.json 文件中添加一行：

  "proxy": "http://www.weather.com.cn/"

2. 城市编号的查询：直接在百度中直接查询当前城市的天气，如下：

点击进入详情，地址栏中显示的编号即为城市id，如下：

3. 因为返回的数据是 JSON 格式，所以在 fetch 函数请求到结果之后，需要使用 res.json() 来获取 JSON 数据，如下：

 

具体天气组件代码如下：

import React from 'react'

class Weather extends React.Component {
  state = {
    weather: null
  }
  componentDidMount () {
    const cityCode = 101210101
    const url = `/data/cityinfo/${cityCode}.html`
    fetch(url).then(res => {
      res.json().then(resJson => {
        this.setState({
          weather: resJson.weatherinfo
        })
      })
    })
  }
  render () {
    const {  weather } = this.state
    return (
      <div>
        { this.state.weather
          ? <ul>
              <li>city: { weather.city }</li>
              <li>cityid: { weather.cityid }</li>
              <li>ptime: { weather.city }</li>
              <li>weather: { weather.weather }</li>
              <li>temp1: { weather.temp1 }</li>
              <li>temp2: { weather.temp2 }</li>
            </ul>
          : <p>暂无数据</p>
        }
      </div>
    )
  }
}

export default Weather

 打印出返回的结果如下：

 

参考：《深入浅出 React 和 Redux 》第七章 《Redux 和服务器通信》