fetch 方法的PUT GET DELETE POST 使用 +express框架
程序员文章站
2022-07-12 19:09:37
...
前端是通过fetch发送PUT GET DELETE POST 请求，以下为代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//GET: 传统的请求地址
fetch('http://localhost:3000/books?id=123', {
method: 'get',
}).then(res => {
return res.text();
}).then(data => {
console.log(data);
})
//GET: restful形式的url
fetch('http://localhost:3000/books/456', {
method: 'get',
}).then(res => {
return res.text();
}).then(data => {
console.log(data);
})
// DELETE: 传统的url
fetch('http://localhost:3000/books?id=789', {
method: 'delete'
}).then(res => {
return res.text();
}).then(data => {
console.log(data);
})
// DELETE: 传统的url
fetch('http://localhost:3000/books?id=789', {
method: 'delete'
}).then(res => {
return res.text();
}).then(data => {
console.log(data);
})
// POST 发送form data类型的数据
fetch('http://localhost:3000/books', {
method: 'post',
body: 'uname=lisi&pwd=123',
headers: {
// 设置请求发送的数据类型
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(res => {
return res.text();
}).then(data => {
console.log(data);
})
// POST 发送JSON格式类型的数据
fetch('http://localhost:3000/books', {
method: 'post',
body: JSON.stringify({ uname: 'zhangsan', pwd: '888222' }),
headers: {
'Content-Type': 'application/json'
}
}).then(res => {
return res.text();
}).then(data => {
console.log(data);
});
// PUT Restful形式的url
fetch('http://localhost:3000/books/123', {
method: 'put',
body: JSON.stringify({
uname: '张三',
pwd: 789
}),
headers: {
'Content-Type': 'application/json'
}
}).then(res => {
return res.text();
}).then(data => {
console.log(data);
})
</script>
</body>
</html>
后端通过express框架响应请求，以下为代码：
const express = require('express')
const bodyParser = require('body-parser')
const morgan=require('morgan');
const app = express()
// 处理参数
// 解析json格式
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(morgan('dev'));
//设置跨域请求
app.all('*', function (req, res, next) {
//设置请求头
//允许所有来源访问
res.header('Access-Control-Allow-Origin', '*')
//用于判断request来自ajax还是传统请求
res.header("Access-Control-Allow-Headers", " Origin, X-Requested-With, Content-Type, Accept");
//允许访问的方式
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
//修改程序信息与版本
res.header('X-Powered-By', ' 3.2.1')
//内容类型：如果是post请求必须指定这个属性
res.header('Content-Type', 'application/json;charset=utf-8')
next()
});
app.get('/books',(req,res)=>{
res.send('get: 传统的url传递参数'+req.query.id);
})
app.get('/books/:id',(req,res)=>{
res.send('get: restful 传递参数'+req.params.id);
})
app.delete('/books',(req,res)=>{
res.send('delete: 传统的url传递参数'+req.query.id);
})
app.delete('/books/:id',(req,res)=>{
res.send('delete: restful形式的url'+req.params.id);
})
app.post('/books',(req,res)=>{
res.send('Post:'+req.body.uname+'---'+req.body.pwd)
})
app.put('/books/:id',(req,res)=>{
res.send('PUT:'+req.params.id+req.body.uname+'---'+req.body.pwd)
})
// 启动监听
app.listen(3000, () => {
console.log('running...')
})
body-parser,用来解析数据请求体传递的数据，如json格式类型的，formdata类型的。
morgan用于在控制台看到客户端访问的地址和请求方式。
上一篇： (一) 线程的概念