Axios的Restful风格与koa2接收参数形式

Axios的Restful风格与koa2接收参数形式

因为项目中涉及到了axios的delete的方法就查询了一下aixos的官网后来在网上搜了一篇axios与restful请求规范的帖子，于是找到自己毕业设计所写的koa2后端项目打算小小的试一下。

axios官网的方法：

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

emmm我只研究了那几个restful风格的方式~~~~~

GET方法：

koa2中安装了koa-bodyparser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

await axios({
url:'/api/test/jiaxin/1',
method:'get',
})
await axios({
url:'/api/test',
method:'get',
params:{
name:'jiaxin'
}
})
//koa2
router.get('/test/:name/:id',async(ctx,next)=>{
console.log(ctx.params)
ctx.body={
message:'查询成功'
}
})
router.get('/test',async(ctx,next)=>{
console.log(JSON.parse(JSON.stringify(ctx.request.query)))
//console.log(ctx.request.query)
//如果直接这样输出会出现[Object: null prototype] { name: 'jiaxin' }，你觉的不舒服的话就先转化成json格式
ctx.body={
message:'查询成功'
}
})
//get请求中规中矩，但是第一种传递值得方式我是第一次使用
//url
'http://localhost:8081/api/test/jiaxin/1'第一种
'http://localhost:8081/api/test?name=jiaxin'第二种
//结果：
{ name: 'jiaxin', id: '1' }//第一种
{ name: 'jiaxin', id: '1' }//第二种

post请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

await axios({
url:'/api/test',
method:'post',
data:{
name:'jiaxin'
},
})
//koa2
router.post('/test',async (ctx)=>{
console.log(ctx.request.body)
ctx.body = {
message:'修改成功'
}
})
//url
'http://localhost:8081/api/test'
//结果
{ name: 'jiaxin'}

PUT

根据阮神的解释（在服务器更新资源（客户端提供改变后的完整资源））

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

await axios({
url:'/api/test/put',
method:'put',
data:{
name:'jiaxin'
},
params:{
value:'put'
}
})
//koa2
router.put('/test/:type',async (ctx)=>{
console.log(ctx.request.body,ctx.params,JSON.parse(JSON.stringify(ctx.request.query)))
ctx.body = {
message:'修改成功'
}
})
//网上大多数跟post差不多，所以我以为他应该是跟post一样只能发送一种数据，但是不经意间的一次尝试之后我发现了他三种方式都是支持的！！
//url
//'http://localhost:8081/api/test/put?value=put'
{ name: 'jiaxin' } { type: 'put' } { value: 'put' }
//你看三种都ok

PATCH

根据阮神的解释（在服务器更新资源（客户端提供改变的属性））

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

await axios({
url:'/api/test/put',
method:'put',
data:{
name:'jiaxin'
},
params:{
value:'patch'
}
})
//koa2
router.patch('/test/:type',async (ctx)=>{
console.log(ctx.request.body,ctx.params,JSON.parse(JSON.stringify(ctx.request.query)))
ctx.body = {
message:'修改成功'
}
})
//patch也是三种方式支持！
//url
//‘http://localhost:8081/api/test/patch?value=patch’
//结果
{ name: 'jiaxin' } { type: 'patch' } { value: 'patch' }

DELETE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

await axios({
url:'/api/test/put',
method:'put',
data:{
name:'jiaxin'
},
params:{
value:'delete'
}
})
//koa2
router.delete('/test/:type',async (ctx)=>{
console.log(ctx.request.body,ctx.params,JSON.parse(JSON.stringify(ctx.request.query)))
ctx.body = {
message:'修改成功'
}
})
//同样也是三种方式支持！
//url
//‘http://localhost:8081/api/test/patch?value=delete’
//结果
{ name: 'jiaxin' } { type: 'patch' } { value: 'patch' }

以上就是我粗略研究了一下axios的restful风格发送请求的方式，原谅我比较懒没有加try catch。。。。最后记录一下我的koa2的app.js的配置，我怕以后忘记

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const Koa = require('koa');
const static = require('koa-static')
const path = require('path')
const Router = require("koa-router");

const testRouter = require('./router/test')

const router = new Router();
const app = new Koa();

app.use(bodyParser())
app.use(
static(path.join(__dirname , './public'))
)

router.use(testRouter.routes())

app.use(router.routes())d
app.listen(4000);