axios发送post请求之后端怎么接收不到数据或者接收到的对象属性全是null

一：基本情况介绍：

前端：这是向后端提交数据的方法，使用addAddress方法，参数是this.addressAdd整个对象，代码中还将token添加到请求头中

submitAddressForm () { // 添加地址数据
      this.$refs.form.validate(valid => {
        if (valid) {
          // 构造请求头对象
          const headers = {
            token: `${this.token}`
          }
          console.log(this.addressAdd)
          addAddress(this.addressAdd, headers)
            .then((response) => {
              console.log(response.data)
              if (response.data.code === 1) {
                this.$message.success('地址添加成功！')
              } else {
                this.$message.error('添加失败')
              }
              this.dialogVisible = false
              selectAll(headers).then((response) => {
                this.addressBook = response.data.data
                console.log(this.addressBook)
              })
            })
        } else {
          console.log('请填写正确的表单信息')
          this.$message.error('请填写正确的表单信息')
        }
      })
    },

下面这是addressAdd对象 

 

后端：下面这是后端接收数据的代码，实体类也在下面：

    /**
     * 添加收货地址
     */
    @PostMapping("/add")
    @ApiOperation("添加收货地址")
    public Result insert(@RequestBody AddressBookAddDTO addressBookAddDTO){
        log.info("添加收货地址：{}",addressBookAddDTO);
        addressService.save(addressBookAddDTO);
        return Result.success();
    }

package com.bookstore.pojo.dto;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * 接收数据的实体类
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class AddressBookAddDTO {

    //收货人
    private String consignee;

    //手机号
    private String phone;

    //性别 0 女 1 男
    private String sex;

    //省级名称
    private String provinceName;

    //市级名称
    private String cityName;

    //区级名称
    private String districtName;

    //详细地址
    private String detail;

}

二：先上结论，axios成功发送请求并且后端也接收到了数据的方式如下：

1、方式一

export const addAddress = ({ consignee, phone, sex, provinceName, cityName, districtName, detail }, headers) => {
  return axios.post(BASE_URL + '/user/address/add', {
    consignee, phone, sex, provinceName, cityName, districtName, detail
  }, {
    headers: headers
  })
}
//将传的数据对象的属性全部列出来传走，后端可以得到数据

2、方式二 

 export const addAddress = (addressBookAddDTO, headers) => {
   return axios.post(BASE_URL + '/user/address/add', addressBookAddDTO, {
     headers: headers
   })
 }
//将addressBookAddDTO整个对象传走，经测试后端可以得到数据

 三：错误写法：看看有没有大意写错的

1、错误写法一：

//上面的addressBookAddDTO加了花括号而下面的没有加
 export const addAddress = ({ addressBookAddDTO }, headers) => {
   return axios.post(BASE_URL + '/user/address/add', addressBookAddDTO, {
    headers: headers
   })
 }

 

 2、错误写法二：

//下面的加了花括号而上面的又忘了
export const addAddress = (addressBookAddDTO, headers) => {
  return axios.post(BASE_URL + '/user/address/add', { addressBookAddDTO }, {
    headers: headers
  })
}

虽然数据可以正常的发送出去，但是后端是接收不到的 

3、错误写法三：

 在前端提交数据的方法里使用一个addressBookAddDTO代替原本的this.addressAdd对象，并且传参时还加了花括号成了{ addressBookAddDTO }这样的参数

submitAddressForm () { // 添加地址数据
      this.$refs.form.validate(valid => {
        if (valid) {
          // 构造请求头对象
          const headers = {
            token: `${this.token}`
          }
          console.log(this.addressAdd)
          const addressBookAddDTO = this.addressAdd
          addAddress({ addressBookAddDTO }, headers)
            .then((response) => {
              console.log(response.data)
              if (response.data.code === 1) {
                this.$message.success('地址添加成功！')
              } else {
                this.$message.error('添加失败')
              }
              this.dialogVisible = false
              selectAll(headers).then((response) => {
                this.addressBook = response.data.data
                console.log(this.addressBook)
              })
            })
        } else {
          console.log('请填写正确的表单信息')
          this.$message.error('请填写正确的表单信息')
        }
      })
    },

 这样的情况下即使我们调用axios发送请求，但是后端也是接收不到数据的

export const addAddress = ({ addressBookAddDTO }, headers) => {
  return axios.post(BASE_URL + '/user/address/add', { addressBookAddDTO }, {
    headers: headers
  })
}

 细心的小伙伴也可以发现我们发送请求负载的数据也成了一个对象包含属性的样子，而不是上面成功的截图里那种直接就是json的格式

 4、错误写法四：

同错法三，我们还是发送请求是使用花括号包裹对象的形式，axios这边代码如下，花括号都不包裹，但也是和上面一样的错误

export const addAddress = (addressBookAddDTO, headers) => {
  return axios.post(BASE_URL + '/user/address/add', addressBookAddDTO, {
    headers: headers
  })
}

 可以看到，形式和错法三一致，后端也是无法接收数据的

 

 四：总结：综上还是对axios不甚理解和粗心导致的，但为了以后使用还是写下笔记记录一下，防止再犯这个错误