目录
一、前言
近期学到路由这块，对于不同请求方式的参数传递一直有点懵懵的，所以正好借学习fetch接口调用的机会，把路由参数的传递及接收理一理
二、fetch基本用法
常用配置选项
- method(String): HTTP请求方法，默认为GET (GET、POST、PUT、DELETE)
- body(String): HTTP的请求参数
- headers(Object): HTTP的请求头，默认为{}
fetch('http://localhost:3000/fdata').then(function (data) {
// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用来获取后台返回的数据
return data.text();
}).then(function (data) {
console.log(data);
})三、不同请求方式的参数传递
1、GET（不同URL）
①传统形式的URL
前台请求代码
fetch('http://localhost:3000/books?id=123', {
method: 'get'
})
.then(function (data) {
return data.text();
}).then(function (data) {
console.log(data);
})后台响应代码
req.query.id
app.get('/books', (req, res) => {
res.send('传统的URL传递参数!' + req.query.id)
})②restful形式的URL
前台请求代码
fetch('http://localhost:3000/books/456', {
method: 'get'
})
.then(function (data) {
return data.text();
}).then(function (data) {
console.log(data);
})后台响应代码
req.params.id
app.get('/books/:id', (req, res) => {
res.send('Restful形式的URL传递参数!' + req.params.id)
})注：使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以。
详细区别可参考我另一篇文章params和query的传参区别
2、DELETE
前台请求代码
fetch('http://localhost:3000/books/789', {
method: 'delete'
})
.then(function (data) {
return data.text();
}).then(function (data) {
console.log(data)
});后台响应代码
req.params.id
app.delete('/books/:id', (req, res) => {
res.send('DELETE请求传递参数!' + req.params.id)
})3、POST（不同响应头）
| 值 | 描述 | 提交数据格式 |
|---|---|---|
| application/x-www-form-urlencoded | 在发送前编码所有字符（默认） | uname=lisi&pwd=123 |
| multipart/form-data | 不对字符编码。使用表单上传文件时，必须让 <form> 表单的 enctype 等于该值。 |
------WebKitFormBoundaryUNZIuug9PIVmZWuw Content-Disposition: form-data; name="username" Tom |
| application/json | 作为请求头告诉服务端消息主体是序列化的JSON字符串。（可以方便的提交复杂的结构化数据，特别适合restful的接口） |
{"title":"test","sub":[1,2,3]} |
①application/x-www-form-urlencoded
前台请求代码
fetch('http://localhost:3000/books', {
method: 'post',
body: 'uname=lisi&pwd=123',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function (data) {
return data.text();
}).then(function (data) {
console.log(data);
})后台响应代码
req.body.uname
app.post('/books', (req, res) => {
res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd)
})注：需引入body-parser中间件
②application/json编码格式
前台请求代码
fetch('http://localhost:3000/books', {
method: 'post',
body: JSON.stringify({
uname: '张三',
pwd: '456'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function (data) {
return data.text();
}).then(function (data) {
console.log(data)
});后台响应代码
req.body.uname
app.post('/books', (req, res) => {
res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd)
})注：响应接口同上，之所以能支持json的形式，是因为有如下处理参数
const bodyParser = require('body-parser')
// 处理参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));4、PUT
前台请求代码
fetch('http://localhost:3000/books/123', {
method: 'put',
body: JSON.stringify({
uname: '王五',
pwd: '789'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function (data) {
return data.text();
}).then(function (data) {
console.log(data)
});后台响应代码
req.params.id req.body.uname
app.put('/books/:id', (req, res) => {
res.send('PUT请求传递参数!' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})