Angular中如何为HTTP GET请求的URL添加ID参数

看起来你遇到的问题分为两部分：服务端URL拼接的写法问题，以及更核心的异步请求导致变量未赋值问题。我来一步步帮你解决：

1. 先修复服务中getTasks的URL拼接 #

你原来的代码用了固定ID，改成动态拼接的话，推荐用ES6的模板字符串（反引号包裹），写法更直观不容易出错：

getTasks(project_id){ 
  this.loadToken(); 
  let headers = new Headers(); 
  headers.append('Content-Type','application/json'); 
  // 用模板字符串插入变量project_id
  return this.http.get(`http://localhost:3000/project/allTask/${project_id}`, {headers: headers}) 
    .map(res => res.json()); 
}

如果不想用模板字符串，也可以用传统的字符串拼接：'http://localhost:3000/project/allTask/' + project_id，效果是一样的。

2. 解决组件中user_id为undefined的核心问题 #

你已经发现了，console.log(this.user_id)在subscribe外面输出undefined，这是因为getProfile()是异步HTTP请求——代码不会等请求返回就继续执行后面的逻辑。

正确的做法是：所有依赖user_id的操作，都必须放到getProfile的回调函数里面，确保拿到用户ID之后再调用getProjects：

ngOnInit() { 
  this.authService.getProfile().subscribe(profile => { 
    this.user_id = profile.user._id; 
    console.log(this.user_id); // 这里能拿到正确的ID
    // 把getProjects的调用移到这里，保证user_id已经赋值
    this.authService.getProjects(this.user_id).subscribe(data => { 
      this.projects = data; 
    }, err =>{ 
      console.log(err); 
      return false; 
    });
  }, err =>{ 
    console.log(err); 
    return false; 
  }); 
  // 这里的代码会在getProfile请求完成前执行，所以user_id还没值
}

3. 额外优化：用RxJS操作符避免嵌套订阅 #

如果觉得嵌套的subscribe看起来乱，可以用RxJS的switchMap操作符来简化代码，让逻辑更清晰：

首先要导入switchMap：

import { switchMap } from 'rxjs/operators';

然后修改ngOnInit：

ngOnInit() { 
  this.authService.getProfile().pipe(
    switchMap(profile => {
      this.user_id = profile.user._id;
      // 返回getProjects的Observable，由外层subscribe处理结果
      return this.authService.getProjects(this.user_id);
    })
  ).subscribe(data => {
    this.projects = data;
  }, err => {
    console.log(err);
  });
}

这样就把嵌套的订阅改成了链式调用，代码更简洁，也更容易维护。

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