axios请求参数的三种方式

1、拼接方式：？ &

  1. Query String Parameters(URL参数)
        //          + 请求头参数 => 参数被定义在请求头的 请求地址中
        //          + 该参数的携带方式主要被应用于无请求体的请求中
        //          + http|https协议的组成中，以?关键字分割地址和参数
        //          + 参数由 key=value&key=value…… 字符串格式进行组成
        //              - key 参数属性名（该属性名由服务器段决定）
        //              - value 参数属性值（理论上任何可以转换为字符串的数据都可以作为参数）
        //                  * URL地址存在长度限制，所以参数容量有限，一般用于携带简单的关键参数
        //                  * JS中有些数据类型强制转换为字符串，会输出无效数据

 <input type="button" value="URL参数-地址拼接" onclick="sendURLParams()">
  function sendURLParams(){
            axios.get("http://127.0.0.1:3000/public/params?username=admin&tel=12345678901")
                .then(( {data} )=>{
                    console.log(data);
                })
                .catch((error)=>{
                    console.log(error);
                    Notice.error({ title:"请求失败" })
                })
        }

2、通过配置设置参数：params:{ }

         //     2. Request payload
        //          + 请求体参数
        //          + 该参数的携带方式只能被应用于有请求体的请求中


<input type="button" value="URL参数-通过配置设定参数" onclick="sendURLParams2()">
        function sendURLParams2(){
            axios.get("http://127.0.0.1:3000/public/params",{
                // `params` 是与请求一起发送的 URL 参数,自动完成参数格式状态
                params:{
                    username:"tom",
                    tel:12345678901
                }
            })
            .then(( {data} )=>{
                console.log(data);
            })
            .catch((error)=>{
                console.log(error);
                Notice.error({ title:"请求失败" })
            })
        }

3、Form Data(请求体参数)==>动态参数，也就是说通过获取dom节点的value值来动态获取参数

  //     3. Form Data(请求体参数)
        //          + 请求体参数
        //          + 该参数的携带方式只能被应用于有请求体的请求中

        // HTTP 的请求组成（请求报文）（抓包）
        //      请求报文头|请求报文基础信息 = 存储请求必要的解释信息(请求类型、请求格式、请求时长……)
        //      请求报文体|额外的请求参数携带
        // HTTP 的响应组成（响应报文）
        //      响应报文头 = 存储请求必要的解释信息(请求类型、请求格式、请求时长……)
        //      响应报文体|服务器响应结果


    <input id="username" type="text" value="admin">
    <input id="tel" type="text" value="12345678901">
    <input type="button" value="URL参数-动态参数" onclick="sendURLParams3()">
       function sendURLParams3(){
            axios.get("http://127.0.0.1:3000/public/params",{
                params:{
                    username:document.getElementById("username").value,
                    tel:document.getElementById("tel").value
                }
            })
            .then(( {data} )=>{
                console.log(data);
            })
            .catch((error)=>{
                console.log(error);
                Notice.error({ title:"请求失败" })
            })
        }

axios请求参数的三种方式

猜你喜欢