Angular 12 HTTP请求拼接路径参数时出现undefined如何解决？

核心错误原因 #

• 路径拼接逻辑存在语法问题，模板字符串中缺少路径分隔符，且手动转义斜杠为%2F属于不必要操作，可能导致路径解析异常
• 调用方法时传入的userId、stateId本身为未定义值，才会直接渲染到路径中显示为undefined
• 现有代码中写的路径片段和你描述的目标路径users/{userId}/state/{stateId}不匹配，需要同步修正

1. service.ts 修正后代码 #

public getParams(userId: number, stateId: number): Observable<MyModel> {
  // 如果实际业务路径是final-rosters，把下面的state换成对应字段即可
  return this.get(`users/${userId}/state/${stateId}`)
    .pipe(map(response => response.body));
}

如果接口前缀为/api/elections/，路径需要写完整：

public getParams(userId: number, stateId: number): Observable<MyModel> {
  return this.get(`/api/elections/${userId}/final-rosters/${stateId}`)
    .pipe(map(response => response.body));
}

2. component.ts 增加参数校验逻辑 #

调用前增加非空判断，避免无效参数传入发起错误请求：

public getUser(
    userId: number,
    stateId: number,
  ): void {
    if (typeof userId === 'undefined' || typeof stateId === 'undefined') {
      console.warn('传入参数为空', userId, stateId);
      return;
    }
    this.myService.getParams(userId, stateId)
      .subscribe(result => {
        this.myModel.next(result);
        console.log('GET DATA ', result);
      });
  }

调试排查技巧 #

如果修复后仍然出现参数undefined问题，可以在getParams方法第一行加打印，确认是入参传递问题还是路径拼接问题：

public getParams(userId: number, stateId: number): Observable<MyModel> {
  console.log('接收到的入参', userId, stateId);
  // 原有逻辑不变
}

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