vue请求方式记录

• ajax请求：get、post

• 区别：
  1、GET和POST是HTTP请求的两种基本方法，要说它们的区别，接触过WEB开发的人都能说出一二。 最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。 … GET请求在URL中传送的参数是有长度限制的，而POST么有。 对参数的数据类型，GET只接受ASCII字符，而POST没有限制
  2、get发送一个tcp数据包，post发送两个，post先发送header数据，然后发送data数据
  3、语义上，get适用于数据获取，post适用于数据新增
  4、幂等：get请求是幂等性的，即请求一次和请求多次的效果是一样的；而post是不具备幂等性的（取决于具体用法），所以在浏览器的返回和刷新中涉及到post请求时，都会提示用户表单将会被再次提交：GET后退按钮/刷新无害，POST数据会被重新提交（浏览器应该告知用户数据会被重新提交）
  5、GET编码类型application/x-www-form-url，POST编码类型encodedapplication/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
  6、GET能被缓存，POST不能缓存
  7、GET对数据长度有限制，当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST无限制
  8、与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分（可以使用一些js包屏蔽掉）

• 请求参数传递方式
  params（参数在url上，后端通过request.getParams(“参数名称获取”)）、data（参数在body之中，后端获取request中的body数据）

• 实践
  后端接口请求方式，post，但是参数传递方式为query类型的，这个时候前端应该怎么传呢？
  下面展示vue的：

this.$axios({
        url: '/admin/appassistant/appAssistant/list',
        method: 'post',
        // contentType 不用设置，因为默认post就是这种编码
        // contentType: "application/x-www-form-urlencoded",
        contentType: "application/json",
        params:  { type: "0", current: "1", size: "10" },
        // data: qs.stringify({ type: "0", current: "1", size: "10" }),
        dataType: "json"
      }).then(res => {
        console.log(res);
      });

这种 params 作为键的，后端参数是可以传递过去的，但是参数同时会显示在请求连接上，并不安全，如下：

为不把参数暴露在地址中，还是将参数放在body中传递，使用qs包把对象转为key=value形式传递参数

import qs from 'qs'
// 使用此方法进行参数传递
data: qs.stringify({ type: "0", current: "1", size: "10" })

此时请求变为：

默认的ajax中的post请求发送数据，将参数设置与body中是：

两者的区别是：前者是键值对，后者是对象。

ajax中的post传递参数默认使用的是 data ， 此时参数传递则是将参数包装在body中进行传递，对应的后端接收应该从request的body中接收，若后端使用request的getParams接收的话，前端应该使用 params 作为键来进行传递参数。

---

参考：

https://segmentfault.com/a/1190000015937372

后续补充其他的。