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

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请求

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

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

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

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

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

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的配置，我怕以后忘记

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);