Axios请求数据格式转换和JavaScript对象动态key

在最近的某项目，有个考勤打卡需求，其中有个打卡设置功能，打卡设置字段包含打卡日期、排除日期、增加日期、日期维护对象、打卡对象、打卡位置、打卡提醒这些字段。

application/json，json字符串化

起初，联调约定的提交数据格式是json形式，使用axios请求接口，axios使用transformRequest在接口请求前处理数据格式以及修改请求头。主要代码如下：

// 新增或编辑打卡设置接口
export function addOrUpdate (data) {
  return axiosInstance({
    url: baseURL + '/dqsf-apps-checkwork/mgr/clockIn/addOrUpdate.do',
    method: 'POST',
    transformRequest: [function (data, headers) {
      console.log('data', data)
      headers['Content-Type'] = 'application/json;charset=UTF-8'
      return JSON.stringify(data)
    }],
    data: data
  })
}

const params = {
        id: this.id,
        ranges,
        excludedClockInDates: this.excludeArr,
        addedClockInDates: this.addArr,
        maintainers: maintainers,
        clockInPersons: clockInPersons,
        clockInAddresses: this.clockInAddresses,
        clockInReminds: this.clockInRemindsTableData
      }
      // console.log(params)
      addOrUpdate(params).then(() => {
        dataBase.top_alert('保存成功', true, 3000)
      })

application/x-www-form-urlencoded

此时已经联调完毕，然而后端说json形式有点问题，要更换请求方式，用Form Data形式，我一想，post默认请求不就是content-type: application/x-www-form-urlencoded;charset=UTF-8吗，于是注释transformRequest，代码如下：

// 新增或编辑打卡设置
export function addOrUpdate (data) {
  return axiosInstance({
    url: baseURL + '/dqsf-apps-checkwork/mgr/clockIn/addOrUpdate.do',
    method: 'POST',
    // transformRequest: [function (data, headers) {
    //   console.log('data', data)
    //   // headers['Content-Type'] = 'application/json;charset=UTF-8'
    //   // return JSON.stringify(data)
    // }],
    data: data
  })
}

可是，后端说后面那个中括号不行，他接收不到数据，他要下面这种.点的形式。

入参数据格式转换

这么看来是要转换一下数据了，我跟后端反馈，能不能把数组json字符串化，后端解析。试了报错，想想算了doge，估计他不想动，那就前端转换数据吧。步骤一：首先遍历数组，再遍历对象数组里面的对象，使用中括号生成动态key，最后存入一个对象中。步骤二：请求接口再使用…扩展运算符拆开字段。

/**
       * 入参转成后端要求的格式
       * @param arr [Array] 要转换的数据
       * @param key [String] 入参字段
       */ 
      const transformArray = (arr, key) => {
        let obj = {}
        arr.forEach((item, index) => {
          for (const k in item) {
            if (Object.hasOwnProperty.call(item, k)) {
              Object.assign(obj, {
                [`${key}[${index}].${k}`]: item[k]
              })
            }
          }
        })
        // console.log('obj', obj)
        return obj
      }

      const params = {
        id: this.id,
        ranges,
        ...transformArray(this.excludeArr, 'excludedClockInDates'),
        ...transformArray(this.addArr, 'addedClockInDates'),
        ...transformArray(maintainers, 'maintainers'),
        ...transformArray(clockInPersons, 'clockInPersons'),
        ...transformArray(this.clockInAddresses, 'clockInAddresses'),
        ...transformArray(this.clockInRemindsTableData, 'clockInReminds')
      }
      // console.log(params)
      addOrUpdate(params).then(() => {
        dataBase.top_alert('保存成功', true, 3000)
      })