React进行服务器端数据请求---fetch

get请求

静态数据不方便修改，而且只能通过本页面进行修改

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script type="text/babel">
class Fetch_get extends React.Component{
constructor(props){
super(props)
this.state = {
arr:[
{"id":"123001","name":"xiaoming"},
{"id":"123002","name":"xiaobing"},
{"id":"123003","name":"xiaona"}
]
}
}
render(){
return (
<div>
<ul>
{
this.state.arr.map((ele,index,arr)=>{
return <li key={index}>{ele.name}</li>
})
}
</ul>
</div>
)
}
}
ReactDOM.render(
<Fetch_get></Fetch_get>,
document.getElementById('root')
);
</script>

请求json数据，完成页面渲染

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script type="text/babel">
class Fetch_get extends React.Component{
constructor(props){
super(props)
this.state = {
arr:[]
}
}
render(){
return (
<div>
<ul>
{
this.state.arr.map((ele,index,arr)=>{
return <li key={index}>{ele.name}</li>
})
}
</ul>
</div>
)
}
componentDidMount(){
var url = "data.json"
var option = {
methods:"get"
}
fetch(url,option).then((res)=>{
return res.json()
}).then((res)=>{
// 请求到的数据
console.log(res)
// 修改state
this.setState({
arr:res
})
// 打印输出
console.log(this.state.arr)
})
}
}
ReactDOM.render(
<Fetch_get></Fetch_get>,
document.getElementById('root')
);
</script>

数据库

为了方便数据的操作，我们平时在页面上看到的数据一般都是在线数据，通过后台系统管理，能够很方便实现对数据的修改

在此，就不多做演示！！！

在线接口

书写数据接口，通过后台操作，读取数据库数据，并形成接口的形式，我们需要对数据进行操作的时候，直接操作接口即可

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script type="text/babel">
[{"id":"123001","name":"xiaoming"},{"id":"123002","name":"xiaobing"},{"id":"123003","name":"xiaona"}]
class Fetch_get extends React.Component{
constructor(props){
super(props)
this.state = {
arr:[]
}
}
render(){
return (
<div>
<ul>
{
this.state.arr.map((ele,index,arr)=>{
return <li key={index}>{ele.name}</li>
})
}
</ul>
</div>
)
}
componentDidMount(){
//请求在线接口
var url = "http://www.taoquan.store/robot/getUsers.php"
var option = {
methods:"get"
}
fetch(url,option).then((res)=>{
return res.json()
}).then((res)=>{
// 请求到的数据
console.log(res.users)
// 修改state
this.setState({
arr:res.users
})
// 打印输出
console.log(this.state.arr)
})
}
}
ReactDOM.render(
<Fetch_get></Fetch_get>,
document.getElementById('root')
);
</script>

post数据请求

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script type="text/babel">
class Com extends React.Component{
constructor(props){
super(props)
this.state = {
num:1
}
}
render(){
return (
<div>
<ul>
<li>1</li>
</ul>
</div>
)
}
componentDidMount(){
var url = 'http://127.0.0.1:8899/api/insertData'
var options = {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'name=1&sex=2&email=3&phone=4&address=5'
}
fetch(url,options)
.then((res)=>{
return res.json()
})
.then((res)=>{
console.log(res)
})
}
}
ReactDOM.render(
<Com></Com>,
document.getElementById('root')
);
</script>

核心代码，需注意

var url = 'http://127.0.0.1:8899/api/insertData'
var options = {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'name=1&sex=2&email=3&phone=4&address=5'
}
fetch(url,options)
.then((res)=>{
return res.json()
})
.then((res)=>{
console.log(res)
})

第二种方式

componentDidMount(){
var data = {
name:"1",
sex:"2",
email:"3",
phone:"4",
address:"5"
}
fetch('http://127.0.0.1:8899/api/insertData',{
method: 'POST',
body: `data=${JSON.stringify(data)}`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
})
.then((res)=>{
console.log(res.json())
})
}

Content-Type：上传文件的时候，一定要设置为application/x-www-form-urlencoded

跨域

fetch跨域概述

在fetch跨域配置中有mode选项，提供了跨域的能力

mode: 'cors', // no-cors, cors, *same-origin

mode:'cors'
- 这个选项提供了跨域的能力, 但是服务端必须支持 cors ,也就是设置 res.header("Access-Control-Allow-Origin", "*");
mode:'no-cors'
- 可以跨域进行数据请求 , 不需要设置跨域 header
- 在该模式下得到的返回数据中 type为opaque。, 能够在控制台看到返回的数据, 但是没有权限使用这些数据
mode:"same-origin"
- 同源, 不允许跨域

并不能成功跨域进行数据的请求

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script type="text/babel">
class Fetch_get extends React.Component{
constructor(props){
super(props)
this.state = {
arr:[]
}
}
render(){
return (
<div>
<ul>
{
this.state.arr.map((ele,index,arr)=>{
return <li key={index}>{ele.name}</li>
})
}
</ul>
</div>
)
}
componentDidMount(){
var url = "https://api.douban.com/v2/movie/top250"
// var url = 'http://127.0.0.1:8899/api/selectData'
var option = {
methods:"get",
mode:'no-cors'
}
fetch(url,option).then((res)=>{
console.log(res)
})
}
}
ReactDOM.render(
<Fetch_get></Fetch_get>,
document.getElementById('root')
);
</script>

使用jsonp调取数据

在原生js中，我们可以利用script标签的支持跨域的特性进行

第一种方式---利用script标签的跨域访问特性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP实现跨域2</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
function fn(response){
console.log(response);
}
</script>
<script src="https://api.douban.com/v2/movie/top250?callback=fn"></script>

第二种方式---动态创建script

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP实现跨域2</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
function fn(response){
console.log(response);
}
var script = document.createElement('script')
script.src = 'https://api.douban.com/v2/movie/top250?callback=fn'
document.body.insertBefore(script, document.body.firstChild);
</script>

第三种方式---使用jquery

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$.ajax({
type:'get',
url:"https://api.douban.com/v2/movie/top250?callback=?",
success(res){
console.log(res)
},
dataType:"jsonp"
})
</script>

React进行服务器端数据请求---fetch相关推荐

React Native 之网络请求 fetch
最近做React native开发,遇到了这种fetch请求,说实话,以前用ajax比较多,对这种fetch请求还真是不怎么了解,所以花时间百度一下,看看大家怎么用的.顺便也需要封装一下网路请求的 ...
React中使用SWR处理数据请求
React中使用SWR处理数据请求在做React项目开发的时候,我们一般都会直接使用axios插件或者fetch进行数据的获取.但是这一次给大家介绍一个插件库SWR,算是网络数据请求的一个补充吧. ...
React基础-React中发送Ajax请求以及Mock数据
前言在 React 中, render 函数返回的结果,取决于组件的 props 和 state 我们都知道 UI 页面上的数据不是写死的,往往是从后端的数据接口中拿到的然后将真实的数据填充到页面 ...
SWR：最具潜力的 React Hooks 数据请求库
原文链接:https://zhuanlan.zhihu.com/p/89570321 作者:飞冰-chenbin92 说明:本文内容主要来源于 SWR 的官方文档以及 GitHub zeit/sw ...
SWR 用于数据请求的 React Hooks 库
SWR 用于数据请求的 React Hooks 库 "SWR" 这个名字来自于 stale-while-revalidate:一种由 HTTP RFC 5861 推广的 HTTP ...
React学习(九)-React中发送Ajax请求以及Mock数据
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 VX-ID:suibichuanji 点 ...
java基于http协议客户端与服务器端的交互,通俗易懂客户端与服务器端交互原理（HTTP数据请求与HTTP响应，包括Servlet部分...
经常看到HTTP客户端与服务器端交互原理的各种版本的文章,但是专业术语太多,且流程过于复杂,不容易消化.于是就按照在 Servlet 里面的内容大致做了一些穿插.本来连 Tomcat 容器和 S ...
HTTP数据请求的方式:fetch与ajax（XMLHttpRequest）与axios
传统 Ajax 指的是 XMLHttpRequest(XHR),最早出现的发送后端请求技术,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱.JQuery ...
数据请求方式Fetch
一.前言在前后端分离项目中,前端请求后端接口得到后端数据,完成页面内容的渲染或功能状态的判断,已经成为常规操作.那么,关于前端如何请求后端接口获取并解析数据,主要有哪些方式呢: 1. 刷新页面:最直 ...
揭秘 React 异步获取数据的进化历程
点击上方前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群本篇文章,以模拟从『Hacker News API[1]』获取热门文章为例,通过一步步地代码优化和封装,阐述 React 异 ...

React进行服务器端数据请求---fetch

React进行服务器端数据请求---fetch相关推荐

最新文章

热门文章