Angular课程项目：使用Promise实现HTTP请求与iTunes API交互

2025-06-10 02:57:19作者：毕习沙Eudora

前言

在现代Web开发中，HTTP请求是前端与后端交互的核心方式。Angular提供了强大的HttpClient模块来处理HTTP请求。本文将深入讲解如何在Angular应用中使用Promise来处理异步HTTP请求，并以iTunes搜索API为例，构建一个完整的音乐搜索应用。

CORS跨域资源共享问题

在开始编码前，我们需要了解一个重要的浏览器安全机制：CORS(跨域资源共享)。这是浏览器实施的安全策略，防止恶意网站从其他域获取数据。

iTunes API默认启用了CORS保护，这意味着如果我们直接从Angular应用发起请求，浏览器会阻止这个请求。开发阶段我们有几种临时解决方案：

浏览器插件解决方案

Chrome用户：可以安装"CORS"插件，一键切换CORS限制 Firefox用户：可使用"CORS Everywhere"插件 Safari用户：需要在"偏好设置→高级"中启用"开发"菜单，然后勾选"禁用跨域限制"

注意：这些方法仅适用于开发环境，生产环境应通过后端代理或正确配置CORS头来解决跨域问题。

构建应用组件

首先创建一个基础的AppComponent，包含搜索表单：

@Component({
  selector: 'app',
  template: `
    <form class="form-inline">
      <div class="form-group">
        <input type="search"
               class="form-control"
               placeholder="输入搜索内容"
               #searchInput>
      </div>
      <button class="btn btn-primary"
              (click)="doSearch(searchInput.value)">
              搜索
      </button>
    </form>
  `
})
class AppComponent {
  constructor() { }

  doSearch(term: string) {
    // 搜索逻辑将在这里实现
  }
}

这个组件包含一个输入框和搜索按钮，点击按钮会调用doSearch方法并传入搜索关键词。

创建搜索服务

直接在主组件中处理HTTP请求不是最佳实践。我们创建一个中间服务SearchService来封装所有与iTunes API的交互：

@Injectable()
class SearchService {
  private apiRoot: string = 'https://itunes.apple.com/search';
  results: SearchItem[] = [];
  loading: boolean = false;

  constructor(private http: Http) { }

  search(term: string): Promise<void> {
    // 搜索实现将在这里完成
  }
}

这个服务使用了@Injectable()装饰器，这样Angular的依赖注入系统可以自动提供Http服务。

使用Promise处理异步请求

Promise是处理异步操作的强大工具。我们在search方法中返回一个Promise：

search(term: string): Promise<void> {
  return new Promise((resolve, reject) => {
    const apiURL = `${this.apiRoot}?term=${term}&media=music&limit=20`;
    
    this.http.get(apiURL)
      .toPromise()  // 将Observable转换为Promise
      .then(
        (res) => {  // 成功回调
          this.results = this.transformResults(res.json().results);
          resolve();
        },
        (msg) => {  // 失败回调
          reject(msg);
        }
      );
  });
}

private transformResults(items: any[]): SearchItem[] {
  return items.map(item => new SearchItem(
    item.trackName,
    item.artistName,
    item.trackViewUrl,
    item.artworkUrl30,
    item.artistId
  ));
}

这里有几个关键点：

我们构造了正确的iTunes API URL
使用Http服务发起GET请求
将Observable转换为Promise
成功时将响应数据转换为领域模型
通过resolve/reject通知调用方结果

在组件中使用服务

首先需要在NgModule中注册服务：

@NgModule({
  imports: [BrowserModule, HttpModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [SearchService]  // 注册服务
})
class AppModule { }

然后在组件中注入并使用：

class AppComponent {
  loading: boolean = false;

  constructor(private itunes: SearchService) { }

  doSearch(term: string) {
    this.loading = true;
    this.itunes.search(term)
      .then(() => this.loading = false)  // 搜索完成后隐藏加载指示器
      .catch(error => {
        this.loading = false;
        console.error('搜索失败:', error);
      });
  }
}

显示搜索结果

使用*ngFor指令循环显示搜索结果：

<div class="text-center">
  <p class="lead" *ngIf="loading">加载中...</p>
</div>

<ul class="list-group">
  <li class="list-group-item" *ngFor="let track of itunes.results">
    <img src="{{track.thumbnail}}" alt="专辑封面">
    <a target="_blank" href="{{track.link}}">
      {{ track.name }} - {{ track.artist }}
    </a>
  </li>
</ul>

领域模型的重要性

我们创建了SearchItem类来封装音乐轨道数据：

class SearchItem {
  constructor(
    public name: string,        // 曲目名称
    public artist: string,      // 艺术家
    public link: string,        // iTunes链接
    public thumbnail: string,  // 专辑封面缩略图
    public artistId: string     // 艺术家ID
  ) {}
}