fetch('url'+参数a, { method: "GET", body: json } .then(res => response.json()) .then(console.log(json)) )

一个发送post请求的示例:

fetch("http://127.0.0.1:7777/postContent", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
mode: "cors",
body: JSON.stringify({
content: "留言内容"
})
}).then(function(res) {
if (res.status === 200) {
return res.json()
} else {
return Promise.reject(res.json())
}
}).then(function(data) {
console.log(data);
}).catch(function(err) {
console.log(err);
});
fetch("/students.json")
.then(
function(response){
if(response.status!==200){
console.log("存在一个问题,状态码为:"+response.status);
return;
}
//检查响应文本
response.json().then(function(data){
console.log(data);
});
}
)
.catch(function(err){
console.log("Fetch错误:"+err);
});
  1. class AwesomeProject extends Component {// 初始化模拟数据
  2. constructor(props) {
  3. super(props);
  4. const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => {r1 !== r2}});
  5. this.state = {
  6. dataSource: ds,
  7. load:false,
  8. text:''
  9. };
  10. }
  11. //耗时操作放在这里面
  12. componentDidMount(){
  13. this.getNet();
  14. }
  15. getNet(){
  16. fetch('http://gank.io/api/search/query/listview/category/福利/count/10/page/1')//请求地址
  17. .then((response) => response.json())//取数据
  18. .then((responseText) => {//处理数据
  19. //通过setState()方法重新渲染界面
  20. this.setState({
  21. //改变加载ListView
  22. load: true,
  23. //设置数据源刷新界面
  24. dataSource: this.state.dataSource.cloneWithRows(responseText.results),
  25. })
  26. })
  27. .catch((error) => {
  28. console.warn(error);
  29. }).done();
  30. }
  31. render() {
  32. if(this.state.load){
  33. return (
  34. <View style={{flex: 1, paddingTop: 22}}>
  35. <ListView
  36. dataSource={this.state.dataSource}
  37. renderRow={(rowData)=>
  38. <View>
  39. <Image
  40. style={{ width: 400, height: 250, marginTop: 5 }}
  41. source={{uri:rowData.url}}/>
  42. </View>}
  43. />
  44. </View>
  45. );
  46. } else{
  47. return(
  48. <View>
  49. <Text>loading......</Text>
  50. </View>
  51. );
  52. }
  53. }
  54. }

项目:

export default class View extends Component {
state = {
total: {},
}

componentDidMount() {
fetch('')
.then((response) => {
return response.json();
})
.then((data) => {
this.setState({total: data.data});
});
}

render() {
const {total: {usersCount, msgsCount}} = this.state;
return (
<div className="user-summary">
<div className="summary-top">
<h1>微信公众号汇总</h1>
<ul>
<li>总关注人数:<span>{usersCount}</span></li>
<li>总消息数:<span>{msgsCount}</span></li>
</ul>
</div>
</div>
);
}
}

 
 

fetch格式的更多相关文章

  1. sql游标使用

    一.游标的作用:Select时,返回的是一个结果集,若需要为结果集返回的过程中,读取到一行数据.需要对此行数据进行处理,比如按读取到的数据作为查询条件返回一个查询结果集等等,应用都需要用到游标.游标可 ...

  2. sql游标及模仿游标操作

    游标用途:对一个查询出来的结果,每一行作为参数进行操作 一:游标操作 --申请一个游标 DECLARE MyCursor CURSOR FOR SELECT ID FROM dbo.tb_stock ...

  3. Git 少用 Pull 多用 Fetch 和 Merge

    本文有点长而且有点乱,但就像Mark Twain Blaise Pascal的笑话里说的那样:我没有时间让它更短些.在Git的邮件列表里有很多关于本文的讨论,我会尽量把其中相关的观点列在下面. 我最常 ...

  4. 在 JS 中使用 fetch 更加高效地进行网络请求

    在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 我的源博客地址:http://blog.parryqiu.com/2016/03/ ...

  5. [No00003B]string格式的日期时间字符串转为DateTime类型

    新建console程序,复制粘贴直接运行: /**/ //using System.Globalization;//代码测试大致时间2015/11/3 15:09:05 //方法一:Convert.T ...

  6. 【JSON 注解】JSON循环引用2----JSON注解@JsonIgnoreProperties+JAVA关键字transient+后台对象与JSON数据的格式互相转化

    接着来说这个JSON循环引用的问题: 关于JSON格式的转化,其实关键就是这几个依赖: <!-- json --> <!-- 1号 --> <dependency> ...

  7. 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法,日期转换和前台显示格式之间,还有JSON取日期数据格式转换成标准日期格式的问题

    项目里有些不同页面间的日期显示格式是不同的, 第一个问题: 比如我用日期控件WdatePicker.js导包后只需在input标签里加上onClick="WdatePicker()" ...

  8. (转)这个API很“迷人”——新的Fetch API

    原文:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching 原标题是This API is So Fetching,Fetching也可以 ...

  9. ES6 fetch函数与后台交互

    最近在学习react-native,遇到调用后端接口的问题.看了看官方文档,推荐使用es6的fetch来与后端进行交互,在网上找了一些资料.在这里整理,方便以后查询. 1.RN官方文档中,可使用XML ...

随机推荐

  1. 无法重启ssh

    rm /dev/null mknod /dev/null c 1 3 chmod 666 /dev/null

  2. angular5自适应窗口大小

    import {AfterViewInit, Directive, ElementRef, HostBinding, HostListener, Inject, Input, Renderer2} f ...

  3. 在ArchLinux、manjaro中安装MySql(mariaDB)

    安装MySql数据库.但是在MySql被Oracle收购之后,很多开源支持者就转而使用MariaDb了.不过MariaDb也和MySql兼容的,所以基本不用有什么担心.由于ArchLinux只带了Ma ...

  4. 【全面】Linux基础知识和基本操作语句大全(一)

    接触Linux已经有一段时间了,由于实际需要,三三两两地掌握了一些基本语法和实用语句,主要都是在日常开发中用得比较多的,条理不是特别清晰,请见谅!下面开始上硬货!! 基本操作: 关闭Linux系统的命 ...

  5. python数据类型之字典(dict)和其常用方法

    字典的特征: key-value结构key必须可hash,且必须为不可变数据类型.必须唯一. # hash值都是数字,可以用类似于2分法(但比2分法厉害的多的方法)找.可存放任意多个值.可修改.可以不 ...

  6. Linux下的硬件驱动——USB设备(转载)

    usb_bulk_msg函数 当对usb设备进行一次读或者写时,usb_bulk_msg 函数是非常有用的; 然而, 当你需要连续地对设备进行读/写时,建议你建立一个自己的urbs,同时将urbs 提 ...

  7. 搜索引擎elasticsearch常用指令演示

    目录 交互方式 常用操作示例 添加文档 删除文档 修改文档 查询 简单查询 高级多条件查询 交互方式 操作ES有3种方式: kibana控制台(Dev Tools) Http + json api接口 ...

  8. poj 1979 走多少个‘ . '问题 dfs算法

    题意:给你一个迷宫地图,让你走.问最多可以走多少个“." 思路:dfs 找到起点,然后对起点进行dfs操作. dfs操作时,要把当前的位置标志成"#"表示已经走过,然后进 ...

  9. Linux学习-核心编译的前处理与核心功能选择

    硬件环境检视与核心功能要求 根据自己的需求来确定编译的选项 保持干净原始码: make mrproper 我们还得要处理一下核心原始码底下的残留文件才行!假设我们是第一次 编译, 但是我们不清楚到底下 ...

  10. 小甲鱼零基础入门PYTHON

     000.愉快的开始 00:17:37 ☆  001.我和Python的第一次亲密接触 00:13:26 ★  002.用Python设计第一个游戏 00:24:00 ★  003.小插曲之变量和字符 ...