使用Promise实现JavaScript HTTP POST请求报错求助

这个错误本质是**ES6暂时性死区（TDZ）**导致的：用let/const声明的变量，在声明语句执行完成前，处于无法访问的状态。结合JSON Server POST请求场景，以下是常见错误场景及修复方案：

常见错误场景与修复 #

1. 变量声明滞后于使用时机 #

错误代码示例：

// 错误：在record声明前就尝试使用它
fetch('http://localhost:3000/contacts', {
  method: 'POST',
  body: JSON.stringify(record),
  headers: {'Content-Type': 'application/json'}
})
const record = {name: '张三', phone: '138xxxx1234'};

修复：将变量声明移到使用代码之前：

const record = {name: '张三', phone: '138xxxx1234'};
fetch('http://localhost:3000/contacts', {
  method: 'POST',
  body: JSON.stringify(record),
  headers: {'Content-Type': 'application/json'}
})

2. Promise链中引用未初始化变量 #

错误代码示例：

// 错误：record声明在Promise链之后，执行时未完成初始化
Promise.resolve()
  .then(() => {
    return fetch('http://localhost:3000/contacts', {
      method: 'POST',
      body: JSON.stringify(record),
      headers: {'Content-Type': 'application/json'}
    })
  })
const record = {name: '张三', phone: '138xxxx1234'};

修复：确保变量在Promise执行前完成声明和赋值：

const record = {name: '张三', phone: '138xxxx1234'};
Promise.resolve()
  .then(() => {
    return fetch('http://localhost:3000/contacts', {
      method: 'POST',
      body: JSON.stringify(record),
      headers: {'Content-Type': 'application/json'}
    })
  })

3. 变量作用域错误 #

错误代码示例：

// 错误：record在局部作用域声明，外部无法访问
function submitContact() {
  if (validateForm()) {
    const record = {name: '张三', phone: '138xxxx1234'};
  }
  return fetch('http://localhost:3000/contacts', {
    method: 'POST',
    body: JSON.stringify(record), // 此处无法访问if块内的record
    headers: {'Content-Type': 'application/json'}
  })
}

修复：调整变量声明到可访问的作用域：

function submitContact() {
  const record = {name: '张三', phone: '138xxxx1234'};
  if (validateForm()) {
    // 表单验证逻辑
  }
  return fetch('http://localhost:3000/contacts', {
    method: 'POST',
    body: JSON.stringify(record),
    headers: {'Content-Type': 'application/json'}
  })
}

JSON Server POST请求额外注意事项 #

• 必须设置Content-Type: application/json请求头，否则JSON Server无法解析请求体
• 启动JSON Server时确认数据文件（如db.json）格式合法，不存在语法错误
• 发送请求前用console.log(record)打印变量，确认数据已正确初始化

内容的提问来源于stack exchange，提问作者el-brouk