Angular 5中如何为简单Get请求构建合规请求头？

看起来你已经走在正确的路上了，不过有些细节可以优化，避免潜在的错误。Angular 5使用的是@angular/http模块（注意和后来Angular 6+的HttpClient区分开），我来帮你梳理正确的实现方式：

完整的实现示例 #

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Observable } from '@angular/http';
import { UserList } from './your-userlist-model-path'; // 替换成你的UserList模型路径
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { ErrorObservable } from 'rxjs/observable/ErrorObservable';

@Injectable()
export class UserService {
  private mainUrl = 'https://your-api-endpoint.com/users'; // 替换为你的API地址
  private token: string; // 假设你的token存储在这个变量里

  constructor(private http: Http) { }

  getUserList(): Observable<UserList[]> {
    // 先检查token是否存在，避免后续操作出错
    if (!this.token) {
      return ErrorObservable.create(new Error('Token is missing, cannot fetch user list'));
    }

    let tokenValue: string;
    try {
      // 注意：如果你的token本身就是字符串（比如从localStorage直接取出的token值），不需要JSON.parse！
      // 只有当token是以JSON格式存储的（比如存储的是{ "token": "xxx" }），才需要解析后取对应字段
      tokenValue = JSON.parse(this.token);
      // 如果是后者，应该写成：tokenValue = JSON.parse(this.token).token;
    } catch (error) {
      return ErrorObservable.create(new Error('Failed to parse token: ' + error.message));
    }

    // 创建请求头实例
    const headers = new Headers();
    // 添加Authorization Bearer头
    headers.append('Authorization', `Bearer ${tokenValue}`);
    // 大多数API会要求这个Content-Type头，根据你的API需求调整
    headers.append('Content-Type', 'application/json');

    // 构建请求选项
    const requestOptions = new RequestOptions({ headers: headers });

    // 发起GET请求并处理响应
    return this.http.get(this.mainUrl, requestOptions)
      // 将API响应的JSON转为UserList数组类型
      .map(response => response.json() as UserList[])
      // 捕获并处理请求中的错误
      .catch((error) => {
        console.error('Error occurred while fetching user list:', error);
        // 你可以在这里自定义错误处理逻辑，比如返回空数组或者抛出用户友好的错误
        return ErrorObservable.create(new Error('Failed to load user list. Please try again later.'));
      });
  }
}

关键注意点 #

• Token解析的坑：这是最容易出错的地方！如果你的this.token已经是直接可用的token字符串（比如从localStorage.getItem('token')获取的就是"eyJhbGciOiJIUzI1Ni..."），那不要用JSON.parse，直接用this.token即可，否则会因为解析非JSON字符串抛出错误。只有当token是以JSON对象形式存储的（比如存的是"{\"token\":\"xxx\"}"），才需要解析后提取对应的token字段。
• 请求头的完整性：除了Authorization，记得添加Content-Type: application/json，很多后端API会校验这个字段。
• 错误处理：一定要加上catch操作符处理请求过程中的网络错误、API返回的错误等，避免未捕获的异常导致应用崩溃。
• 类型安全：用response.json() as UserList[]来确保响应数据符合你的模型类型，充分利用TypeScript的类型检查优势。

你原有代码的小问题 #

你代码里的.cat...应该是.catch，记得要从rxjs/add/operator/catch导入这个操作符，否则会报错。

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