在一个项目中,数据的请求发送数据是最为重要的,不可能我们的数据都是自己进行编写的

在react中官方推荐使用的方法是fetch。当然它里面也可以使用vue中的axios请求数据,jQuery的$.ajax 以及元素ajax

下面重点说一下fetch

get方法非常简单,

 componentDidMount() {
fetch('http://127.0.0.1:8100/getAaa')
.then(res=>res.json())
.then(json=>this.setState({list: json}))
}

post方法相对于get有点复杂,

 add() {
fetch('http://127.0.0.1:8100/getDel',{
method:'post',//改成post
mode: 'cors',//跨域
headers: {//请求头
'Content-Type': 'application/x-www-form-urlencoded'
},
body:"..."//向服务器发送的数据
})
.then(res=>res.json())
.then(json=>{console.log(json)})
}

以上就是关于react fetch两种使用方法

有什么不足的或者不对的欢迎大家指出

react-fetch数据发送请求的更多相关文章

  1. xml数据发送请求,读取xml

    # coding:utf-8 import requests url = "http://httpbin.org/post" # python3字符串换行,在右边加个反斜杠 bod ...

  2. feign 发送请求时,传多个参数时的写法

    第一:传参方式写法,当参数个数大于2个时,需要用@RequestParam @PostMapping(value = "/configReader/configValue.do", ...

  3. react中使用Ajax请求(axios,Fetch)

    React本身只关注于界面, 并不包含发送ajax请求的代码,前端应用需要通过ajax请求与后台进行交互(json数据),可以使用集成第三方ajax库(或自己封装) 常用的ajax请求库 jQuery ...

  4. ajax、fetch、axios — 请求数据

    jquery ajax jq 的ajax是对原生XHR的封装,除此以外还增添了对JSONP的支持.用起来非常方便 用法: $.ajax({ url:发送请求的地址, data:数据的拼接,//发送到服 ...

  5. React Native探索(五)使用fetch进行网络请求

    相关文章 React Native探索系列 前言 React Native可以使用多种方式来请求网络,比如fetch.XMLHttpRequest以及基于它们封装的框架,fetch可以说是替代XMLH ...

  6. Chrome-逆向分析JS-2获取发送请求位置(以datatables获取表格数据为例)

    剧透:就是使用了一下 Chrome Source 的 XHR/fetch Breakpoints 功能,在发送请求时在该行进入断点调试. # 一:不认识一下 XHR/fetch Breakpoints ...

  7. [Socket网络编程]由于套接字没有连接并且(当使用一个 sendto 调用发送数据报套接字时)没有提供地址,发送或接收数据的请求没有被接受。

    原文地址:http://blog.sina.com.cn/s/blog_70bf579801017ylu.html,记录在此方便查看 解决办法: MSDN的说明: Close 方法可关闭远程主机连接, ...

  8. Query通过Ajax向PHP服务端发送请求并返回JSON数据

    Query通过Ajax向PHP服务端发送请求并返回JSON数据 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuer ...

  9. 向.net后端发送请求获取数据,在前端动态填充表格

    实现效果 实现步骤 通过Ajax请求的方式 1.在前端定义Table 2.通过Ajax向.net后端发送数据请求 3.在.net后端定义方法供前端调用,并返回所需的数据 4.通过构造字符串的方式,将后 ...

随机推荐

  1. redux源码学习笔记 - combineReducers

    上一篇有了解到,reducer函数的两个为:当前state和此次dispatch的action. state的结构是JavaScript对象,每个key都可以代表着不同意义的数据.比如说 { list ...

  2. 神奇的CSS3混合模式

    神奇的css3混合模式 对于前端开发人员应该都很熟悉Photoshop的图层混合模式,就是几个图层按不同的模式进行混合,实现不同的图像效果.但是当我们前端同学在切这些效果图的时候,基本上就是一刀切的, ...

  3. Android--UI之TextView

    前言 开门见山,这一篇博客主要讲一下在Android开发中,UI控件TextView的一些使用方式,并且通过四个例子实现一般项目中需要的效果来讲解TextView的使用.并且在之后的一段时间之内,都会 ...

  4. 使用IntelliJ IDEA新建Java Web后端resfulAPI模板

    初始化项目 打开IntelliJ IDEA,我的版本是Version 2018.1.4.点击Create New Project.在左侧的列表中选择Maven.然后在右侧勾选Create from a ...

  5. Windows2008/2012/2016多用户同时远程连接终端服务授权

    win2016多用户登录: 添加角色“远程桌面服务”,子角色“远程桌面会话主机”和“远程桌面授权”,重启 远程桌面授权,激活服务器,企业协议,协议号6565792,授权模式“每用户” 本地策略管理器g ...

  6. SpringBoot2.0应用(四):SpringBoot2.0之spring-data-jpa

    如何整合spring data jpa 1.pom依赖 <dependency> <groupId>org.springframework.boot</groupId&g ...

  7. MySQL 通讯协议

    Client/Server 通讯协议用于客户端链接.代理.主备复制等,支持 SSL.压缩,在链接阶段进行认证,在执行命令时可以支持 Prepared Statements 以及 Stored Proc ...

  8. ES搜索结果调优

    访问我的博客 自从使用 ElasticSearch 重构了主站的搜索项目之后,之后又陆续接入了其他两个项目,目前使用 SpringBoot 方式跑了一个伪集群,主站使用的时候,比较稳定,没有人反馈说有 ...

  9. 【原创】sizeof运算符总结

    sizeof运算符返回一条表达式或一个类型名字的所占字节数,返回值为size_t的常量表达式,注意:sizeof右结合,且为编译时计算,而非运行时 两种形式:sizeof (type)和sizeof ...

  10. springboot情操陶冶-SpringApplication(一)

    SpringApplication是所有springboot的入口类,分析此类有助于我们了解springboot的工作机制.本文以2.0.3.REALEASE版本作分析 SpringApplicati ...