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/json入参

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
  })
}
content-type: application/x-www-form-urlencoded

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

入参数据格式转换

这么看来是要转换一下数据了,我跟后端反馈,能不能把数组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)
      })
入参字段转成后端要求的格式
服务端接收成功

发表回复

您的电子邮箱地址不会被公开。