将axios POST请求迁移为fetch后报Cannot read property 'id' of undefined错误

算力阿峰

2026-11-1

从axios迁移到fetch的适配错误说明

你代码里的问题全是直接把axios的API用法套到fetch上导致的，一共3处关键错误：

请求体字段名不匹配：fetch的请求配置里，承载POST请求内容的字段是body，不存在axios风格的data配置项。你当前写的data: myData会被fetch完全忽略，等于请求根本没携带表单数据。
手动设置了会导致解析失败的请求头：传FormData格式请求时，绝对不要手动写Content-Type: multipart/form-data。浏览器会自动为这个请求头生成携带boundary分隔符的完整值，你手动写死头会直接丢失boundary参数，服务端完全无法解析你提交的表单字段。正确做法是删掉这个自定义头，让浏览器自动生成对应配置。
响应解析逻辑不匹配：axios会自动把返回的JSON响应解析为JS对象，挂载在response.data上；但fetch不会做任何自动解析，拿到的Response实例只有原始响应流，必须手动调用异步的response.json()方法才能拿到结构化的返回值。你现在直接读response.data.id时，因为response对象本身没有data属性，自然会抛出“Cannot read property 'id' of undefined”的报错。

修正后的可用代码

export async function createFriend ({ name, age }) {
  const myData = new FormData()
  myData.append('name', name)
  myData.append('age', age)

  const response = await fetch('/myApi/friends', {
    method: 'POST',
    body: myData
  })
  
  // 建议先加状态校验，避免错误响应进入解析流程
  if (!response.ok) {
    throw new Error(`接口请求异常，状态码 ${response.status}`)
  }

  const result = await response.json()
  return result.id
}