在Angular 5中通过服务为HTTP请求设置请求头

先给你整理好格式化后的完整代码（补充了缺失的GET请求实现方法）：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Angular 6+推荐写法，自动注册为根服务，无需手动在模块中声明
})
export class AccountsService {
  // 请补充完整的API接口地址
  private accountsUrl = 'http://semsem.talaween.net/semsem/api/v1/your-complete-endpoint';

  // HTTP请求配置项，包含Basic认证头
  private httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'Basic ' + btoa('abc:xys')
    })
  };

  constructor(public http: HttpClient) { }

  // 发起GET请求获取账户数据的示例方法
  getAccounts() {
    return this.http.get<any[]>(this.accountsUrl, this.httpOptions);
  }
}

关键细节与优化建议： #

• @Injectable装饰器优化：加上providedIn: 'root'是Angular现在的最佳实践，不用再去模块的providers数组里注册服务，Angular会自动处理依赖注入的范围。
• Basic认证注意事项：btoa('abc:xys')是把用户名abc和密码xys用冒号拼接后做Base64编码，但btoa只支持ASCII字符，如果你的账号密码包含非ASCII字符，得先转成UTF-8再编码，比如用btoa(unescape(encodeURIComponent('用户名:密码')))。
• 配置项封装：把httpOptions设为private更符合封装原则，避免外部代码随意修改请求头配置。
• 错误处理补充：如果需要捕获请求异常，可以给GET请求加上RxJS的错误处理操作符，示例如下：

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

// ...

getAccounts() {
  return this.http.get<any[]>(this.accountsUrl, this.httpOptions)
    .pipe(
      catchError(this.handleError)
    );
}

private handleError(error: any) {
  console.error('请求出错详情:', error);
  return throwError(() => new Error('账户数据请求失败，请稍后重试'));
}

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