Axios请求中如何基于预定义API路径正确拼接ID参数？

我来帮你解决这个问题！你遇到的问题是因为Symfony生成的编辑/删除路径里带有{id}占位符，而你尝试的PHP风格语法{$id}在JavaScript里是不生效的，下面是几种不用硬编码URL的解决方案：

方法一：直接字符串替换占位符 #

Symfony的path()方法生成的itemEdit路径应该是类似/api/v1/items/edit/{id}这样的格式，你只需要把路径里的{id}替换成实际的条目ID即可：

handleEditItemToApi () {
  // 替换路径中的{id}占位符为实际ID（这里用this.itemId代表你要编辑的条目ID）
  const editUrl = newApiAddresses.itemEdit.replace('{id}', this.itemId);
  
  axios.put(editUrl, { 
    "itemId": this.itemId, // 这里建议和URL中的ID保持一致
    "date": this.changeDateFormat(),
    // 其他需要提交的字段
  })
  .then(response => {
    // 处理成功响应
    console.log('编辑成功', response);
  })
  .catch(error => {
    // 处理错误
    console.error('编辑失败', error);
  });
}

方法二：封装工具函数复用逻辑 #

如果你的应用中有很多类似的带参数的API路径，可以封装一个通用的工具函数来处理占位符替换，避免重复代码：

// 通用路径参数替换函数
function replacePathParam(path, paramName, value) {
  return path.replace(`{${paramName}}`, value);
}

// 在编辑函数中使用
handleEditItemToApi () {
  const editUrl = replacePathParam(newApiAddresses.itemEdit, 'id', this.itemId);
  
  axios.put(editUrl, { 
    "itemId": this.itemId,
    "date": this.changeDateFormat(),
    // 其他字段
  });
}

为什么你之前的写法不生效？ #

你尝试的newApiAddresses.itemEdit/{$id}是PHP的语法，在JavaScript中这种写法会被当成无效的字符串拼接，而且{$id}在前端环境中也无法被解析为变量，所以会生成错误的URL格式。

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