POST请求的两三事

前言

今天和后端对接的时候，发现自己完全不理解POST请求传递的数据类型，出了很多bug，现在就来总结一下。

axios

项目中的请求都是用axios发送的，经过了一些简单的封装

import axios from 'axios'
import store from '@/store'
// create an axios instance
const service = axios.create({ 
  //baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 0) {
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {

      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)
export default service

使用的时候只需要

import request from '@/utils/request'
export function checkUserName(userName){
  return request({
    url: '/user/checkUserName',
    method: 'get',
    params: { userName }
  })
}

对于get请求，按上面的形式就完全可以了。但是对于POST请求，请求参数和数据是放在请求体里的，这时候就需要对其类型进行规范，并和后端进行统一，否则就会报错（各种报错）。

Content-Type

在请求中，Content-Type说白了就是对POST请求内容的数据类型的说明。它有很多种形式，常用的有：multipart/form-data、application/json、application/x-www-form-urlencoded。但是不论哪一种，都必须要和后端统一，否则后端会识别不了数据甚至报错。

multipart/form-data

这种形式就是最原始的表单提交类型，但是现在我们一般不直接使用表单提交，而是把数据整合起来单独提交。所以现在需要使用let formdata = new FormData(); formdata.append()来构造一个formdata数据。

axios写法：

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data,
    headers:{'Content-Type':'multipart/form-data;boundary=****'}
  }) 

其中boundary是用来标志参数开始结尾，以及分割不同参数。如果使用原生表单，设置表单的enctype 等于 multipart/form-data，boundary会自动生成。

application/x-www-form-urlencoded

这种方式就是我们项目使用的方式，看名字就能看出这种方式采用的是url编码。简单来说这种参数类型的POST请求，相当于把get请求的参数，从路径里转移到了请求体了。

axios写法：

import qs from 'qs'
export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data:qs.stringify(data),
    headers:{'Content-Type':'application/x-www-form-urlencoded'}
  }) 

application/json

这种是最常见，同时也是axios的默认发送方式，如果你不设置Content-Type，axios就会用这种方式发送POST请求。

这种发送方式对前端很友好，因为是把json格式直接放在请求体里。

axios写法：

return request({
    url: '/user/register',
    method: 'post',
    data
  })