美文网首页
body传参?parameter传参?Request Paylo

body传参?parameter传参?Request Paylo

作者: kup | 来源:发表于2018-08-08 20:52 被阅读0次

    今天,是有委屈的一天;今天,是有小情绪的一天。所以,我们要对今天进行小结,跟它做一个了断!

    今天,后端来一个接口,告诉我“要用post请求,parameter形式传参”。over。
    初级选手一般听到用post请求,但素用parameter传参一定很懵圈o((⊙﹏⊙))o。那么请先移步看这篇文章,get和post请求其实并没本质区别,他们都是tcp连接,post请求可以将参数放在body中,也可以是parameter形式,both fine!

    但是对于post请求来说,后端所谓的“parameter形式传参”还有以下两个区别:

    1. 第一种parameter形式的传参和一般get请求一样,参数会带在请求路径尾部,即?a=1&b=2&c=3...,对于这种形式的参数,在控制台可以看到参数形式是“Query String Parameter”。这种对应的request headers是 后端用req.query进行处理。
    2. 第二种parameter形式的传参,被他们叫做“parameter”,但是它在请求时不会跟随到请求路径的尾部,即对外是不能直观看到的。对于这种形式的参数,在控制台可以看到参数形式是“Form Data”。它对应的Request Headers是: Content-Type:application/x-www-form-urlencoded。后端也用req.query进行处理。

    总之,对于post请求这两种形式的parameter传参,后端的处理方式是一样的,他们也称之为“key=value形式传参”。

    另一种更为常见的,也是前端普遍认为的post请求传参是放在所谓“body”中的,在控制台中可以看到参数形式叫做"request payload",它是json格式的参数。对于这种形式的参数,后台用req.body来处理。

    接入正题~
    一开始我是这么调用的:

        axios({
            method: 'post',
            url: '/xxx/xxx',
            data: {
                a: X,
                b: XX,
                c: XXXX,
                d: XXXXX
            }
        })
    

    在这么写完后,打开控制台一看,是上面说的"request payload"参数形式。即后端所言"body传参",它是json格式的对象。不是他们所想要的…… 因而请求失败。-_-||

    然后呢,我修改上述代码,把data改成params,如下:

        axios({
            method: 'post',
            url: '/xxx/xxx',
            params: {
                a: X,
                b: XX,
                c: XXXX,
                d: XXXXX
            }
        }) 
    

    ok!这种可以成功请求接口,但是参数会尾随在请求路径后面,亦不是理想的传参形式,毕竟我们不想那么直接地把参数暴露出来。

    肿么办?翻阅资料后,终于发现qs这个包。其实qs.stringify的作用和jquery的$.param()一样,把对象转换为键值对格式。

        import qs from 'qs' 
        axios({
            method: 'post',
            url: '/xxx/xxx',
            data: qs.stringify({ // >>>关键是这一步,将参数对象转变为key=value格式,这才是后端所想。这种方式,即不直观对外暴露参数,也达到使用“parameter形式”
                a: X,
                b: XX,
                c: XXXX,
                d: XXXXX
            })
        })    
    

    以上~

    相关文章

      网友评论

          本文标题:body传参?parameter传参?Request Paylo

          本文链接:https://www.haomeiwen.com/subject/lgffbftx.html