接口调用Fetch方法以及fetch请求参数
fetch概述
看一个基本的例子：
服务端代码：
app.get('/fdata',(req,res)=>{
setTimeout(function(){
res.send('this is content retrived by fetch method')
},3000)
})
测试：
<script>
fetch('http://127.0.0.1:9999/fdata').then((data) => {
return data.text() // data.text()返回的是一个promise对象
}).then((result) => {
// 调用then这里获取的才是真正的数据
console.log(result)
})
</script>
等了几秒以后控制台输出：
fetch请求参数
fetch之get请求参数
我们再看下面的代码：
// 服务端
app.get('/books',(req,res)=>{
setTimeout(function(){
console.log(req.query)
res.send('传统参数传递:' + JSON.stringify(req.query))
},3000)
})
// 这里我们用旧的方式传入参数，method:'get'写不写无所谓，默认就是get
fetch('http://127.0.0.1:9999/books?id=123',{
method:'get'
}).then((data) => {
return data.text()
}).then((result) => {
console.log(result)
})
结果：
我们现在换restful风格的url:
那么在服务端我们也要修改一下路由：
这里要用:id来接收传来的数据，express需要用req.params来获得查询数据
结果：
这里有个细节注意一下：
这里的参数999传过去的时候，在服务端：
路由接收传来的参数的变量名是可以自定义的，不一定非要是id，保持统一就可以了
fetch之delete请求参数
// 服务端
app.delete('/books/:id',(req,res)=>{
setTimeout(function(){
res.send('Delete请求参数传递:' + req.params.id)
},3000)
})
fetch('http://127.0.0.1:9999/books/666',{
method:'delete'
}).then((data) => {
return data.text()
}).then((result) => {
console.log(result)
})
结果：
fetch之post请求参数
- 发送x-www-form-urlencoded类型的数据
上代码：
// 服务端
const bodyParser = require('body-parser')
// 配置body-parser
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
extended: false }))
app.post('/books', (req, res) => {
// body就是body-parser处理的
console.log(req.body)
res.send('Post请求参数传递:' + req.body.uname + '---' + req.body.pw)
})
fetch('http://127.0.0.1:9999/books/',{
method:'post',
body:'uname=dean&pw=123456',
headers:{
'Content-Type':'application/x-www-form-urlencoded'
}
}).then((data) => {
return data.text()
}).then((result) => {
console.log(result)
})
发post请求主要就下面这些变化：method,请求体body,头部headers：
结果：
- 发送json类型的数据
// 服务端
app.post('/books', (req, res) => {
console.log(req.body)
res.send('Post请求参数传递:' + req.body.uname + '---' + req.body.age)
})
js代码需要这样修改：
结果：
fetch之put请求参数
app.put('/books/:id', (req, res) => {
console.log('req.body:',req.body)
console.log('req.params:',req.params)
console.log('请求id:',req.params.id)
res.send('Put请求参数传递:' + req.body.bname + '---' + req.body.bprice)
})
注意这里::id需要用req.params.id取值
结果：
fetch响应结果
我们看看如何用fetch的json API返回数据：
// 服务端
app.get('/books/json', (req, res) => {
// 调用express的json方法
res.json({
bname:'ES6',
bprice:79
})
})
结果：
