axios请求参数的三种方式示例详解

  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. 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(请求体参数)
        //          + 请求体参数
        //          + 该参数的携带方式只能被应用于有请求体的请求中
        // 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.get('/user?id=12345&name=user')
.then(function (res) {
    console.log(res);
}).catch(function (err) {
    console.log(err);
});
//但是为了方便全局统一调用封装的axios，我一般采用（推荐）
axios.get('/user', {  //params参数必写 , 如果没有参数传{}也可以
    params: {  
       id: 12345，
       name: user
    }
})
.then(function (res) {
    console.log(res);
})
.catch(function (err) {
    console.log(err);
});

var formData=new FormData();
formData.append('user',123456);
formData.append('pass',12345678);
axios.post("/notice",formData)
     .then((res) => {return res})
     .catch((err) => {return err})

import axios from 'axios'
import qs from 'Qs'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,qs.stringify({
    data
}))
.then(res=>{
    console.log('res=>',res);            
})

//方法一：
import axios from 'axios'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
    console.log('res=>',res);            
})
//方法二：
var readyData=JSON.stringify({
    id:1234,
    name:user
});
axios.post("/notice",readyData)
     .then((res) => {return res})
     .catch((err) => {return err})