前端常见的请求数据汇总（GET POST）

前端在请求接口的时候要和后端人员配合好，根据后端提供的接口文档来进行开发，一般请求类型有这几种

1.GET请求

• GET请求一般会将数据放到URL后
• GET请求对所发信息量的限制是2000个字符
• GET请求的参数只能是ASCII码，所以中文需要URL编码
• GET请求用于提交非敏感数据和小数据

前端在使用GET请求的时候一般是为了查询数据等操作，这时会把参数放在地址栏后面一起传过去所以请求头如果对token等没有特殊要求的情况下一般是不用设置的

例如：

// 查询课时列表方法
export function getClassHour (params) {
    return request({
        url: API.classHourList,
        method: 'get',
        params
        })
}

// 获取课时列表
      const params = {
        curricid: this.queryParam.curricid,
        pageNow: this.queryParam.pageNow,
        pageSize: this.queryParam.pageSize
      }

      getClassHour(params).then(res => {
        //获取数据后的操作
        }
      )

而最终请求的效果是这样的

2.POST请求

• POST请求会将数据放到请求体中
• POST请求对信息量没有限制
• POST请求传参没有数据编码这个限制
• POST请求用于提交敏感数据和大数据

前端在使用POST请求的时候一般是为了传输敏感数据参数，所以不会放在地址栏后面。

在使用POST请求的时候要和后端人员配合好，根据后端所要求的格式来传输参数，不同的格式有不同的请求头设置。

　　1、json字符串：application/json//axios的默认的数据类型

 　　类似这种POST请求一般是传json字符串然后请求头设置为application/json

　　例如：

//在拦截器设置请求头
config.headers['Content-Type'] = 'application/json'

// 新增课程
export function addClass (data) {
    return request({
        url: API.addClass,
        method: 'post',
        data: data
    })
}

//新增课程操作
//this.form是参数
addClass(this.form).then(response => {
                    this.$message.success(
                      '新增成功',
                      3
                    )
                  }).catch(err => {
                      console.log(err)this.$message.error('错误')
                    })

实际请求效果如下：

 可以发现 参数是以对象的格式发送的

　　2、表单（键值对类型）：application/x-www-form-urlencoded

 　　类似这种POST请求一般是传表单然后请求头设置为application/x-www-form-urlencoded

        用Qs.stringify()将对象序列化成URL的形式，Qs是axios里面自带的，所以直接引入就可以了

　　例如

  //在拦截器设置请求头
　　config.headers['Content-Type'] = 'multipart/form-data'

service.post(url, qs.stringify(data, {arrayFormat: 'indices', allowDots: true}))
        .then((res) => {
          if (res) {
            console.log(res)
            resolve(res.data)
          } else {
            resolve(res)
          }
        })
        .catch((err) => {
          reject(err)
        })
//data为参数

实际请求效果如下：

以上就是前端GET请求和POST请求基本的类型

为何要设置请求头里的'Content-Type'：

我们使用不同请求方式时，参数的传输方式是不一样的，但是服务端在取我们接口的请求参数时，用的方法其实却是一样的，都是使用request.getParameter(key)来获取，其实是因为tomcat在中间会对请求参数进行解析处理，处理完把解析出来的表单参数放在request parameter map中，所以后端就可以通过request.getParameter(key)来统一获取数据，而tomcat解析的时候是怎么知道当前的请求是post请求的呢，就是通过'contentType'，当'contentType'为"application/x-www-form-urlencoded",它才会去读取请求体数据。

为何要用Qs.stringify()将对象序列化成URL的形式：

在最开始的时候我们说了，post请求参数是以键值对的形式存在请求体里，用Qs.stringify()就是把传入的对象转换为键值对。

最后在vue里用axios的时候，针对post请求的问题可以做一个全局的设置，避免每个请求都要设置一遍太麻烦

总的来说

　　前端在平时开发中要严格按照接口文档需要传的参数格式和字段来和后端进行配合，如果发现有什么不合理的地方要及时跟后端同事进行沟通，不要不敢说，不然最后卡住的会是自己，如果不确认自己写的是否正确而后端同事说接口没有问题的时候可以在Postman进行接口测试，如果确实是可以用的说明是自己写的代码有问题，这时候仔细把请求头和格式对比清楚就可以了。