React与Node.js联调POST请求时出现Promise pending及JSON解析报错问题

问题1：async/await写法返回Promise pending的原因 #

Response.json()本身是异步方法，返回值为Promise对象，你在打印时没有添加await关键字等待它解析完成，所以输出的是pending状态的Promise。链式写法中.then(res => res.json())会自动等待该Promise状态变为resolved后再执行后续回调，因此不会出现该问题。

问题2：JSON解析报错的原因 #

你的Express后端POST /register接口使用response.send('POST received')返回纯文本字符串，返回的Content-Type为text/plain，内容首字符是'P'。前端调用result.json()会尝试将返回内容按JSON语法解析，纯文本不符合JSON格式要求，因此抛出该语法错误。

修复方案 #

前端handleSubmit逻辑调整 #

const handleSubmit = async (e) => {
  e.preventDefault();
  // 此处调整为直接赋值，避免生成嵌套对象，减少后端解析成本
  const inputData = {
    username: username,
    password: password,
  };
  const requestCall = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(inputData),
  };
  const result = await fetch('http://localhost:8080/register', requestCall);
  // 后端当前返回纯文本，用text()解析；如果后续调整为返回JSON，替换为json()即可
  const responseData = await result.text();
  console.log(responseData);
};

后端可选调整（如需返回JSON格式） #

将POST /register接口的response.send('POST received')修改为response.json({msg: 'POST received'})，前端即可直接使用result.json()正常解析返回内容。

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