React网络请求fetch之post请求
本节介绍下React下fetch的post请求
（1）编写服务端代码
/*加载express模块*/ var express = require('express') /*加载path路径处理核心模块*/ var path = require('path') /*加载body-parser中间件*/ var bodyParser = require('body-parser') /*创建app应用 => 类似于Node.js原始的http.createServer()*/ var app = express() /*定义端口号*/ var port = 3888 /* 开放静态资源，开发时建议使用“动态绝对路径” path核心模块+__driname非模块成员 */ app.use('/public',express.static(path.join(__dirname,'./public'))) /*配置模板引擎*/ /*1、定义当前应用使用的模板引擎。参数1：模板引擎名称，同时也是模板文件的后缀；参数2：用于解析处理模板内容的“方法”*/ app.engine('html', require('express-art-template')); /*2、设置模板文件存放目录。参数1：必须是views；参数2：views目录路径*/ app.set('views','./public/views') /*3、注册模板引擎，将之前定义的模板引擎配置到应用中。 参数1：必须是view engine；参数2：必须是第1步里定义的模板引擎名称即html*/ app.set('view engine','html') /*body-parser中间件配置*/ app.use(bodyParser.urlencoded({extended:true})) app.use(bodyParser.json()) app.get('/login',function(req,res){ res.render('login.html') }) app.post('/login',function(req,res){ console.log(req.body) }) /*监听端口并启动*/ app.listen(port,function(){ console.log('Server is running at port'+port) })
之后启动服务器，监听post请求数据
（2）编写组件模板代码
然后编写fetch请求，如下所示
完整代码如下所示
import React,{Component} from 'react'
class FetchPost extends Component {
constructor(props){
super(props)
this.state = {
username:'',
pwd:''
}
}
handleUsername(event){this.setState({username:event.target.value})}
handlePwd(event){this.setState({pwd:event.target.value})}
handleSubmit(event){
event.preventDefault()
fetch('http://localhost:3888/login',{
method:'post',
headers:{
'Accept':'application/json,text/plain,*/*',/* 格式限制：json、文本、其他格式 */
'Content-Type':'application/x-www-form-urlencoded'/* 请求内容类型 */
},
body:`username=${this.state.username}&pwd=${this.state.pwd}`
}).then((response)=>{
return response.json()
}).then((data)=>{
console.log(data)
}).catch(function(error){
console.log(error)
})
}
render(){
return (
<form onSubmit={this.handleSubmit.bind(this)}>
用户名：<input
type="text" name="username"
onChange={this.handleUsername.bind(this)}
id="username" value={this.state.username}/><br/>
密码：<input
type="password" name="pwd"
onChange={this.handlePwd.bind(this)}
id="pwd" value={this.state.pwd}/><br/>
<button>登录</button>
</form>
)
}
}
export default FetchPost
此时测试如下
服务端输出如下所示
此时便可以通过fetch发送post请求，完成交互
（3）解决跨域
此时虽然可以正常获取，但是存在跨域问题，所以加下来编写后台代码，解决跨域问题
此时便可以解决跨域，接下来在前端做出对应处理即可
完整代码如下：
/*加载express模块*/ var express = require('express') /*加载path路径处理核心模块*/ var path = require('path') /*加载body-parser中间件*/ var bodyParser = require('body-parser') /*创建app应用 => 类似于Node.js原始的http.createServer()*/ var app = express() /*定义端口号*/ var port = 3888 /* 开放静态资源，开发时建议使用“动态绝对路径” path核心模块+__driname非模块成员 */ app.use('/public',express.static(path.join(__dirname,'./public'))) /*配置模板引擎*/ /*1、定义当前应用使用的模板引擎。参数1：模板引擎名称，同时也是模板文件的后缀；参数2：用于解析处理模板内容的“方法”*/ app.engine('html', require('express-art-template')); /*2、设置模板文件存放目录。参数1：必须是views；参数2：views目录路径*/ app.set('views','./public/views') /*3、注册模板引擎，将之前定义的模板引擎配置到应用中。 参数1：必须是view engine；参数2：必须是第1步里定义的模板引擎名称即html*/ app.set('view engine','html') /*body-parser中间件配置*/ app.use(bodyParser.urlencoded({extended:true})) app.use(bodyParser.json()) app.get('/login',function(req,res){ res.render('login.html') }) app.post('/login',function(req,res){ console.log(req.body) if(req.body.username && req.body.pwd){ // 设置响应头信息 res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader("Cache-Control","no-cache"); return res.status(200).json({ code:0, message:'登录成功' }) } }) /*监听端口并启动*/ app.listen(port,function(){ console.log('Server is running at port'+port) })
