中国天气网(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 和服务器通信》

React 使用 fetch 请求天气的更多相关文章

  1. react之fetch请求json数据

    Fetch下载 npm install whatwg-fetch -S Fetch请求json数据 json文件要放在public内部才能被检索到

  2. [RN] React Native Fetch请求设置超时

    一.实现思路 根据Promise.race的特性,我们在Promise.race里面添加两个任务,一个是正常的网络请求任务A,另外一个便是网络延时任务B,网络延时可以利用setTimeout方法实现. ...

  3. React native 中使用Fetch请求数据

    一.代码 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from ' ...

  4. React Native 网络请求封装:使用Promise封装fetch请求

    最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...

  5. React Native网络请求

    很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这 ...

  6. 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  7. Fetch请求后台的数据

    <style> #btn{ width: 50px; height: 50px; background-color: red; } #output{ width: 100px; heigh ...

  8. spark streaming 接收kafka消息之三 -- kafka broker 如何处理 fetch 请求

    首先看一下 KafkaServer 这个类的声明: Represents the lifecycle of a single Kafka broker. Handles all functionali ...

  9. HTML中跨域请求天气粗略效果

    HTML中跨域请求天气粗略效果 html+css部分: <style> table{ border:1px red solid; border-collapse: collapse; ma ...

随机推荐

  1. Altera Stratix IV 命名规则

    由于要开发基于DE4平台的应用,应该要了解一下该平台的芯片情况Stratix IV 具体型号为:Stratix IV EP4SGX230KF40C2 命名规范如下 官网资料为:https://www. ...

  2. Spring MVC: 环境搭建并实现简易的HelloWorld

    第一步:使用配置Tomcat服务器的Eclipse新建一个名为“TestSpringMVC”的web项目 第二步:将所使用的jar包复制到WEB-INF/lib目录下 第三步:在web.xml中配置D ...

  3. golang log

    自带log模块 写入文件 package main import ( "fmt" "log" "os" ) func main(){ log ...

  4. Putty的设置保存

    用了好几年都不知道这功能, 以前每次在连接时只能手工更改字符为utf-8,当时在想怎么这么弱呢 后来才知道... 1 字符 Translation下  字体Appearance下 颜色Colours下 ...

  5. c#一些常用的方法集合

    是从一个asp.net mvc的项目里看到的.挺实用的. 通过身份证号码获取出生日期和性别 通过身份证号码获取出生日期和性别 #region 由身份证获得出生日期 public static stri ...

  6. python基础——元组、文件及其它

    Python核心数据类型--元组 元组对象(tuple)是序列,它具有不可改变性,和字符串类似.从语法上讲,它们便在圆括号中,它们支持任意类型.任意嵌套及常见的序列操作. 任意对象的有序集合:与字符串 ...

  7. 用起来超爽的Maven——进阶篇

    以后随着使用的maven的频率增加,此文件会越来越大,也是为什么需要把默认C:\Users\Administrator\.m2 \repository目录改变为D:/OpenSources/repos ...

  8. 「暑期训练」「Brute Force」 Far Relative’s Problem (CFR343D2B)

    题意 之后补 分析 我哭了,强行增加自己的思考复杂度...明明一道尬写的题- -(往区间贪心方向想了 其实完全没必要,注意到只有366天,直接穷举判断即可. 代码 #include <bits/ ...

  9. C++学习008-delete与delete[]的差别

    对于简单的数据类型,delete与delete[]是没啥差别的,就是等价的 例如 int main() { int *pdata = new int[20]; delete pdata; //dele ...

  10. 第十篇 Python的字符串格式化

    字符串格式化:就是按照你的意愿做一个拼接的过程. 1. 字符串格式化的第一种方式:百分号方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存. %[ ...