如何在JavaScript的Fetch API中添加路径变量？

你代码里存在两个核心问题：一是路径中的:id占位符未替换为实际数值，二是请求体没有转成JSON字符串，这都会导致请求失败。以下是具体解决方案：

关键修改步骤 #

• 替换路径变量：直接把URL里的:id替换成目标资源的ID（比如你要修改的2），用ES6模板字符串或字符串拼接都可以，这和你在Postman里手动输入ID的逻辑完全一致。
• 处理请求体：fetch的body参数不能直接传JavaScript对象，必须用JSON.stringify()转成JSON字符串，否则服务器无法解析你的修改内容。

修改后的完整代码 #

async function updateData() {
  const targetId = 2; // 要修改的资源ID
  let url = `https://blablabla/moves/${targetId}`; // 用模板字符串替换路径占位符

  const fetchData = {
    method: "PUT",
    body: JSON.stringify({ // 将对象转为JSON字符串
      roomid: 2512,
      move: "move 2",
      id: targetId
    }),
    headers: new Headers({
      "Content-Type": "application/json; charset=UTF-8",
    }),
  };

  try {
    const response = await fetch(url, fetchData);
    if (!response.ok) {
      throw new Error(`请求失败，状态码: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('请求出错:', error);
  }
}

额外说明 #

• 改用try/catch配合async/await处理请求，比混用await和.then()的逻辑更清晰，还能捕获请求失败的异常。
• 路径变量本质就是URL的一部分，不需要在fetch的配置对象里单独设置，直接拼接到URL中即可，这和Postman里手动填写路径参数的操作是一样的。

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