Angular发送JSON请求出现\\n替代\n多余转义序列如何解决

你遇到的JSON请求中\n被转义为\\n属于二次转义问题，通常是字符串本身携带转义后的换行符、或HTTP请求序列化阶段重复执行JSON序列化导致的，可通过以下方法修复：

方案1：直接替换多余转义字符（最快生效） #

在generatePreview方法中完成模板变量替换后，新增一行正则替换逻辑，将所有转义后的\\n还原为真实换行符\n：

generatePreview() {
  this.whatsAppRequest.messages = new Array<Message>();
  this.recipients.forEach(recipient => {
    let personalizedMessage = this.message;
    recipient.fields.forEach(field => {
      personalizedMessage = personalizedMessage.replace(/\{\{[\*\d]\}\}/g, field);
    });
    // 新增转义字符还原逻辑
    personalizedMessage = personalizedMessage.replace(/\\\\n/g, '\n');
    
    // 原有后续逻辑保持不变
    console.log(personalizedMessage);
    console.log("File selected in preview " + this.recipient.url);
    if (this.attachment) {
      let message = new Message();
      message.recipients = new Array<any>();
      message.recipients.push({
        to: recipient.number
      });
      message.media = {
        caption: personalizedMessage,
        url: recipient.url
      };
      this.whatsAppRequest.messages.push(message);
    } else {
      let message = new Message();
      message.recipients = new Array<any>();
      message.recipients.push({
        to: recipient.number
      });
      message.messageText = personalizedMessage;
      this.whatsAppRequest.messages.push(message);
    }
  });
}

方案2：排查HTTP请求封装逻辑（从根源避免） #

你封装的httpService.postRequest如果存在重复JSON序列化操作，也会导致转义异常：

• Angular原生HttpClient会自动对传入的对象参数执行一次JSON.stringify
• 如果你们封装的postRequest方法内部又手动调用了一次JSON.stringify处理请求体，就会把原本的\n二次转义为\\n

修复方法：删掉postRequest中多余的JSON.stringify逻辑，直接传入原始请求对象即可。

方案3：手动控制序列化过程 #

如果需要完全掌握序列化逻辑，避免封装层的额外处理，可以在sendWhatsApp中手动序列化请求体，同时指定请求头：

sendWhatsApp(req: any): Observable<any> {
  const url = "https://example/whatsapp/json";
  // 手动仅执行一次序列化
  const serializedReq = JSON.stringify(req);
  return this.httpService.postRequest(url, serializedReq, false, "https://example/whatsapp/json", {
    headers: {'Content-Type': 'application/json'}
  }).map((clientResponse: Response) => clientResponse);
}

验证方法 #

修改完成后在发送请求前打印序列化后的请求体：

console.log(JSON.stringify(this.whatsAppRequest))

查看输出内容中换行符的显示为\n即代表修复成功。

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