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 和服务器通信》
React 使用 fetch 请求天气的更多相关文章
- react之fetch请求json数据
Fetch下载 npm install whatwg-fetch -S Fetch请求json数据 json文件要放在public内部才能被检索到
- [RN] React Native Fetch请求设置超时
一.实现思路 根据Promise.race的特性,我们在Promise.race里面添加两个任务,一个是正常的网络请求任务A,另外一个便是网络延时任务B,网络延时可以利用setTimeout方法实现. ...
- React native 中使用Fetch请求数据
一.代码 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from ' ...
- React Native 网络请求封装:使用Promise封装fetch请求
最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...
- React Native网络请求
很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这 ...
- 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- Fetch请求后台的数据
<style> #btn{ width: 50px; height: 50px; background-color: red; } #output{ width: 100px; heigh ...
- spark streaming 接收kafka消息之三 -- kafka broker 如何处理 fetch 请求
首先看一下 KafkaServer 这个类的声明: Represents the lifecycle of a single Kafka broker. Handles all functionali ...
- HTML中跨域请求天气粗略效果
HTML中跨域请求天气粗略效果 html+css部分: <style> table{ border:1px red solid; border-collapse: collapse; ma ...
随机推荐
- Altera Stratix IV 命名规则
由于要开发基于DE4平台的应用,应该要了解一下该平台的芯片情况Stratix IV 具体型号为:Stratix IV EP4SGX230KF40C2 命名规范如下 官网资料为:https://www. ...
- Spring MVC: 环境搭建并实现简易的HelloWorld
第一步:使用配置Tomcat服务器的Eclipse新建一个名为“TestSpringMVC”的web项目 第二步:将所使用的jar包复制到WEB-INF/lib目录下 第三步:在web.xml中配置D ...
- golang log
自带log模块 写入文件 package main import ( "fmt" "log" "os" ) func main(){ log ...
- Putty的设置保存
用了好几年都不知道这功能, 以前每次在连接时只能手工更改字符为utf-8,当时在想怎么这么弱呢 后来才知道... 1 字符 Translation下 字体Appearance下 颜色Colours下 ...
- c#一些常用的方法集合
是从一个asp.net mvc的项目里看到的.挺实用的. 通过身份证号码获取出生日期和性别 通过身份证号码获取出生日期和性别 #region 由身份证获得出生日期 public static stri ...
- python基础——元组、文件及其它
Python核心数据类型--元组 元组对象(tuple)是序列,它具有不可改变性,和字符串类似.从语法上讲,它们便在圆括号中,它们支持任意类型.任意嵌套及常见的序列操作. 任意对象的有序集合:与字符串 ...
- 用起来超爽的Maven——进阶篇
以后随着使用的maven的频率增加,此文件会越来越大,也是为什么需要把默认C:\Users\Administrator\.m2 \repository目录改变为D:/OpenSources/repos ...
- 「暑期训练」「Brute Force」 Far Relative’s Problem (CFR343D2B)
题意 之后补 分析 我哭了,强行增加自己的思考复杂度...明明一道尬写的题- -(往区间贪心方向想了 其实完全没必要,注意到只有366天,直接穷举判断即可. 代码 #include <bits/ ...
- C++学习008-delete与delete[]的差别
对于简单的数据类型,delete与delete[]是没啥差别的,就是等价的 例如 int main() { int *pdata = new int[20]; delete pdata; //dele ...
- 第十篇 Python的字符串格式化
字符串格式化:就是按照你的意愿做一个拼接的过程. 1. 字符串格式化的第一种方式:百分号方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存. %[ ...