一、GET 和 POST 传参方式的优缺点

    1.post更安全(不会作为url的一部分,不会被缓存、保存在服务器日志、以及浏览器浏览记录中)
    2.post发送的数据量更大(get有url长度限制)
    3.post能发送更多的数据类型(get只能发送ASCII字符)
    4.post比get慢
    5.Post是向服务器提交数据的一种请求,get是向服务器发索取数据的一种请求。
    6.get会将数据缓存起来,而post不会
    7.post请求包含更多的请求头
    8.post在真正接受数据之前会先将请求头发送给服务器进行确认,然后才真正发送数据

二、GET 和 POST 传参方式的请求过程

    post请求的过程:
        1.浏览器请求tcp连接(第一次握手)
        2.服务器答应进行tcp连接(第二次握手)
        3.浏览器确认,并发送post请求头(第三次握手,这个报文比较小,所以http会在此时进行第一次数据发送)
        4.服务器返回100 continue响应
        5.浏览器开始发送数据
        6.服务器返回200 ok响应
    get请求的过程
        1.浏览器请求tcp连接(第一次握手)
        2.服务器答应进行tcp连接(第二次握手)
        3.浏览器确认,并发送get请求头和数据(第三次握手,这个报文比较小,所以http会在此时进行第一次数据发送)
        4.服务器返回200 ok响应。

三、相对来说 GET 对比 POST 的优势是什么?

    GET 的URL可以手动输入啊,你在地址栏打个POST看看。本质上面, GET 的所有信息都在URL, 所以很方便的记录下来重复使用。如果你期望你复制的url资源可以更好的分享给别人看,那就用GET方法吧~POST方法做不到哦~
    然而从深层次上分析:虽然这两者都是明文传送。但它们表达的语义不一样,这决定了主干网络可以对其做不同的处理。
        get表达的是一种幂等的,只读的,纯粹的操作,即它除了返回结果不应该会产生其它副作用(如写数据库),因此绝大部分get请求(通常超过90%)都直接被CDN缓存了,这能大大减少web服务器的负担。
        而post所表达的语义是非幂等的,有副作用的操作,所以必须交由web服务器处理。
        因此若是把所有get请求换成post,意味着主干网络上的所有CDN都废掉了,web服务器要处理的请求数量将成百上千倍地增加,显然这不是一个聪明的做法!

四、VUE之使用 AXIOS 进行GET 和 POST 进行传参

    1.axios的定义
        基于Promise的HTTP客户端,用于浏览器和node.js。
    2.axios的特征
        1.做的XMLHttpRequest从浏览器
        2.让HTTP从node.js的请求
        3.支持Promise API
        4.拦截请求和响应
        5.转换请求和响应数据
        6.取消请求
        7.自动转换JSON数据
        8.客户端支持防范XSRF
    3.axios的安装
        三种方式,均可进行

     

   $  npm install axios   // 使用npm
        $  bower install axios   // 使用bower
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>   // 通过cdn直接调用
           

    4.axios的使用
        添加引用

      

  import axios from 'axios';
        

    5.aixos之 get传参方式模板
        此次get传参中的url需要进行字符串拼接

    

    var id = 001;
        var url =  'http://192.168.**.***:8080/Card';
        url +=     `?cardId=${id}`;   // 拼接字符串
        axios.get(url).then(function(response) {
          if (response.data == false) {
              this.$Message.success("注册成功");
          } else {
              this.$Message.info("注册失败");
          }
        });
            

    6.aixos之 post传参方式实例

     

   var url =  ''http://192.168.**.***:8080/Card';
        axios.post('url', {
          数据库字段1: 'value',
          数据库字段2: 'value'
        }
        )
        .then(function (response) {
         //具体操作
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });


原文链接:https://blog.csdn.net/weixin_43618932/article/details/98490191

vue axios请求方式和传参格式

httpget方法传递数组参数有两种形式

形式一:

通过逗号拼接query参数

 
http://localhost:8080/api?arr=1,2,3,4&name=1 

形式二:

通过数组名+下标指定参数

 


http://localhost:8080/api?arr[0]=1&arr[1]=2 

使用axiosget方法传递数组参数

形式一的解决方案

 
// 这里注意使用+''将参数转换成了字符串,实际上就是把arr变成了字符串传出去
 const params =
 { arr: [1,2,3,4] + '', 
list: [1,2,3,4]+ '' 
} 
// 创建axiaos对象,框架中常见的创建方式
 const req = 
axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL,// api base_url 
timeout: 6000 // 请求超时时间
 }) 
// 创建请求的promise方法,框架中常见的api封装方式
 const queryWayOne = 
(params) => req({
 url: 'xxx',
 method: get, params
 }) 
// 在vue组件中使用 ... 
created() 
{ queryWayOne(params).then(res=>{}) } ... 

形式二的解决方案

 

// 这里没有转换成字符串
 const param = 
{ arr: [1,2,3,4], 
list: [1,2,3,4] } 
// 安装qs
 npm i qs 
// 引入qs 
import qs from 'qs' 
// 在方法中添加paramsSerializer 
const queryWayOne = (params) => req({
 url: 'xxx',
 method: get,
 params,
 paramsSerializer: params => qs.stringify(params)
 }) 


 

    get和delete请求,请求参数格式是query格式,参数是在url后通过“&”拼接

    get请求,参数放在config中的params中

 //params参数必写,如果没有参数传{}也可以
//接口全写请求:  url地址?id=12121&name='huahua'
//或者直接拼接在接口中写axios.get("url地址?id=12121&name='huahua'")
axios.get('url地址', {
    params: {
        id: 12121,
        name: 'huahua'
    }
})

    封装

export function add(pathParam) {
  return request({
    url: /abc + pathParam,
    baseURL: ,
    method: 'get',
  });
}



export function copy(param) {
  return request({
    url:/abc,
    baseURL: baseURL,
    method: 'get',
    params: param,
  });
}


post的代码封装
export function add(param) {
  return request({
    url: /url,
    baseURL:/baseURL,
    method: 'post',
    data: param,
  });
}

    delete请求, 参数放在config中的data中

//接口全写请求:  url地址?id=12121&name='huahua'
//或者直接拼接在接口中写axios.delete("url地址?id=12121&name='huahua'")
axios.delete('url地址', {
    data: {
        id: 12121,
        name: 'huahua'
    }
})

    post请求, 参数放在第二个参数data中

axios.post('url地址', {
        id: 12121,
        name: 'huahua'
})

 

问题场景

场景很简单,就是一个正常 axios post 请求:

axios({
    headers: {
        'deviceCode': 'A95ZEF1-47B5-AC90BF3'
    },
    method: 'post',
    url: '/api/lockServer/search',
    data: {
        username,
        pwd
    }
})

后台说没有接收到你的传参。

这就有点奇怪了,我看了一下浏览器的请求信息是 OK 的,参数都是有的,而且之前这样用 axios 也没有这个问题。

但是这个接口是通用的,别人都用了,是 OK 的,接口没问题。

问题原因

要点1

原因就是这次的接口使用 java spring mvc 
并且在这个方法上使用了注解 @RequestParam

那么这个是什么意思呢,这个是只能从请求的地址中取出参数,也就是只能从 username=admin&password=admin这种字符串中解析出参数。

要点2

我们还可以看到我们这次请求的 Content-Type:

application/json;charset=UTF-8

关于这一点需要说明的是:

1、axios会帮我们 转换请求数据和响应数据 以及 自动转换 JSON 数据 

 2、在 axios 源码中发现下面这段内容:(很关键) 

我们知道在做 post 请求的时候,我们的传参是 data: {...} 或者直接 {...} 的形式传递的,嗯,就是下面这两种形式

【第一种形式】 

【第二种形式】 

非常的刺激,这两种形式无一例外都触发了 axios 源码中【很关键】的那一段代码

问题分析

也就是说,我们的 Content-Type 变成了 application/json;charset=utf-8 
然后,因为我们的参数是 JSON 对象,axios 帮我们做了一个 stringify 的处理。 
而且查阅 axios 文档可以知道:axios 使用 post 发送数据时,默认是直接把 json 放到请求体中提交到后端的。

那么,这就与我们服务端要求的 'Content-Type': 'application/x-www-form-urlencoded' 以及 @RequestParam 不符合。

解决方案

解决方案一

【用 URLSearchParams 传递参数】

let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
    method: 'post',
    url: '/api/lockServer/search',
    data: param
})

需要注意的是: URLSearchParams 不支持所有的浏览器,但是总体的支持情况还是 OK 的,所以优先推荐这种简单直接的解决方案

解决方案二

网上有很多方案说使用 
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 
或者 
{headers:{'Content-Type':'application/x-www-form-urlencoded'}} 
我试了一下,其实这样还是不行的 
【还需要额外的操作,(我们要将参数转换为query参数)】 
引入 qs ,这个库是 axios 里面包含的,不需要再下载了。

import Qs from 'qs'
let data = {
    "username": "admin",
    "pwd": "admin"
}

axios({
    headers: {
        'deviceCode': 'A95ZEF1-47B5-AC90BF3'
    },
    method: 'post',
    url: '/api/lockServer/search',
    data: Qs.stringify(data)
})

解决方案三

既然 axios 源码中有那么一段【很关键】的代码,那么,我们也可以通过修改 transformRequest 来达到我们的目的。

在 axios 的请求配置项中,是有 transformRequest 的配置的: 

OK,那么现在我们的请求就可以写成下面这个样子了:

import Qs from 'qs'
axios({
    url: '/api/lockServer/search',
    method: 'post',
    transformRequest: [function (data) {
        // 对 data 进行任意转换处理
        return Qs.stringify(data)
    }],
    headers: {
        'deviceCode': 'A95ZEF1-47B5-AC90BF3'
    },
    data: {
        username: 'admin',
        pwd: 'admin'
    }
})

解决方案四

【重写一个 axios 实例,重新实现属于我们自己的 transformRequest】

import axios from 'axios'
let instance = axios.create({
    transformRequest: [function transformRequest(data, headers) {
        normalizeHeaderName(headers, 'Content-Type');
        if (utils.isFormData(data) ||
          utils.isArrayBuffer(data) ||
          utils.isBuffer(data) ||
          utils.isStream(data) ||
          utils.isFile(data) ||
          utils.isBlob(data)
        ) {
          return data;
        }
        if (utils.isArrayBufferView(data)) {
          return data.buffer;
        }
        if (utils.isURLSearchParams(data)) {
          setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
          return data.toString();
        }
        /*改了这里*/
        if (utils.isObject(data)) {
          setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
          let _data = Object.keys(data)
          return encodeURI(_data.map(name => `${name}=${data[name]}`).join('&'));
        }
        return data;
    }],
})

解决方案五

axios.post('/api/lockServer/search',"userName='admin'&pwd='admin'");

解决方案六

我们知道现在我们服务端同学接收参数用的是 @RequestParam(通过字符串中解析出参数) 
其实还有另一种是 @RequestBody(从请求体中获取参数)。

我们让后端的同学改成 @RequestBody 不就可以了吗,(#^.^#) 【他说我才不改呢】

如果觉得文章不错,可以给小编发个红包给予鼓励.

你要觉得这篇文章比较好,记得点推荐!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐