使用FormData发送JSON对象数组遇Podio API格式报错问题

问题描述 #

我在向Podio API端点发送请求时，电话号码需要严格遵循如下JSON结构：
"phone": [{"type":"main", "value":"#"}, ...]（数组内包含一个含type和value两组键值对的对象），否则请求会被拒绝。我尝试了两种设置phone键值的方式：

const doStuff = () => {
  const formData = new FormData()

  // 以下是两种尝试方式

  // 尝试1
  formData.set('phone', [{ type: 'main', value: '313-555-2121' }])
  // 最终生成的字段值：
  "phone":"[Object Object]"

  // 尝试2
  formData.set(
    'phone',
    JSON.stringify([{ type: 'main', value: '313-555-2121' }])
  )
  // 最终生成的字段值：
  "phone":"[{\"type\":\"main\",\"value\":\"313-555-2121\"}]"

  // 格式化为包含fields的对象并序列化，API要求此结构
  const formattedForApi = JSON.stringify({fields: Object.fromEntries(formData.entries())})

  // 发送POST请求...
}

但两次尝试均触发API报错，提示第一个值无效，需为"main"。请问是否是JSON.stringify影响了实际发送的数据？

解决方案 #

问题核心是用错了数据传递方式——Podio这个接口接收的是JSON格式请求体，而非multipart/form-data，完全不需要用FormData中转。直接构造符合要求的JSON对象发送即可：

const doStuff = async () => {
  // 直接构造API要求的payload结构
  const payload = {
    fields: {
      phone: [{ type: 'main', value: '313-555-2121' }],
      // 其他需要提交的字段也按API规则添加在这里
    }
  }

  // 发送请求时指定Content-Type为application/json
  const response = await fetch('你的Podio API端点地址', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // 别忘了添加Podio要求的认证头，比如Authorization: Bearer xxx
    },
    body: JSON.stringify(payload)
  })

  const result = await response.json()
  // 处理返回结果
}

为什么之前的尝试失败？ #

• 尝试1：直接把数组对象传给FormData，FormData会自动将对象转为字符串[Object Object]，完全不符合API需要的数组结构，自然报错。
• 尝试2：虽然先把数组序列化成了JSON字符串，但后续又将FormData转成对象再整体序列化，导致phone的值变成了被双重转义的字符串（而非数组对象）。Podio收到的是字符串而非数组，根本识别不出里面的main类型，所以报错。

内容的提问来源于stack exchange，提问作者Nathan Nye