Angular 中如何使用 TypeScript 进行 HTTP 请求-JavaScript中文网-JavaScript教程资源分享门户

Angular 中如何使用 TypeScript 进行 HTTP 请求

在 Angular 开发中，我们经常需要使用 HTTP 请求与后端进行数据交互。而 TypeScript 又是 Angular 的必备技术之一，那么如何在 Angular 中使用 TypeScript 进行 HTTP 请求呢？本文将从如何封装 Service 开始，详细介绍 TypeScript 中常用的 HTTP 请求方法以及如何处理请求结果，希望能对你的学习和开发有所帮助。

创建 HTTP Service

HTTP 请求的方法和参数传递比较复杂，而一个好的设计应该是高内聚低耦合的。因此，我们首先需要创建一个 HTTP Service，将请求相关的代码封装起来，达到代码的复用性和可维护性。

在 Angular 中，我们可以使用 @Injectable 装饰器将一个 Service 声明为可注入的。Angular 也提供了 HttpClient 模块来进行 HTTP 请求，其方法和参数非常灵活，本文将以此为例说明。

// www.javascriptcn.com code example
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HttpService {
  constructor(private http: HttpClient) { }

  get(url: string, options?: {}): Observable<any> {
    return this.http.get(url, options);
  }

  post(url: string, body: any, options?: {}): Observable<any> {
    return this.http.post(url, body, options);
  }

  put(url: string, body: any, options?: {}): Observable<any> {
    return this.http.put(url, body, options);
  }

  delete(url: string, options?: {}): Observable<any> {
    return this.http.delete(url, options);
  }
}

这里我们定义了四个公共方法：get、post、put 和 delete，分别对应 HTTP 请求的 GET、POST、PUT 和 DELETE 方法。这些方法都返回一个 Observable 对象，使用者可以通过订阅该对象来获得请求结果。

发起 HTTP 请求

在触发 HTTP 请求时，我们需要指定请求的 url、method、数据等参数，然后调用封装好的 HTTP Service 进行请求。比如：

// www.javascriptcn.com code example
import { Component } from '@angular/core';
import { HttpService } from './http.service';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="getData()">Get Data</button>
    <button (click)="postData()">Post Data</button>
  `
})
export class AppComponent {
  constructor(private httpService: HttpService) { }

  getData() {
    const url = 'https://jsonplaceholder.typicode.com/todos/1';
    const options = { params: { userId: '1' } };
    this.httpService.get(url, options).subscribe(res => console.log(res));
  }

  postData() {
    const url = 'https://jsonplaceholder.typicode.com/posts';
    const body = { title: 'foo', body: 'bar', userId: 1 };
    this.httpService.post(url, body).subscribe(res => console.log(res));
  }
}

这里我们在组件里定义了两个方法，一个用来获取数据，一个用来提交数据。我们通过调用 HTTP Service 的 get 和 post 方法来发起相应的 HTTP 请求，并使用 subscribe 方法来订阅 Observable 对象，获取请求结果。

处理请求结果

HTTP 请求的返回值一般是 JSON 数据格式，我们可以根据接口定义一个数据模型，并使用 rxjs 中的 map 操作符对 Observable 对象进行转换，将 JSON 数据转换成我们定义的数据模型，方便后续的数据处理和展示。

// www.javascriptcn.com code example
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class HttpService {
  constructor(private http: HttpClient) { }

  getTodos(): Observable<Todo[]> {
    const url = 'https://jsonplaceholder.typicode.com/todos';
    return this.http.get<Todo[]>(url).pipe(
      map(todos => todos.map(todo => ({ ...todo, title: todo.title.toUpperCase() })))
    );
  }
}

这里我们定义了一个 Todo 接口，并在 HTTP Service 中定义了一个 getTodos 方法，用来获取 Todos 数据。使用 rxjs 的 pipe 方法，我们可以依次对 Observable 对象进行一系列操作，这里我们先使用 map 操作符将 JSON 数据转换成 Todo 数组，然后将所有 title 转换成大写字母，并返回转换后的 Observable 对象。

在组件中，我们只需要订阅 HTTP Service 中的 getTodos 方法即可获取数据：

// www.javascriptcn.com code example
import { Component, OnInit } from '@angular/core';
import { HttpService, Todo } from './http.service';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let todo of todos">{{ todo.title }}</li>
    </ul>
  `
})
export class AppComponent implements OnInit {
  todos: Todo[];

  constructor(private httpService: HttpService) { }

  ngOnInit() {
    this.httpService.getTodos().subscribe(todos => this.todos = todos);
  }
}

结语

本文介绍了如何在 Angular 中使用 TypeScript 进行 HTTP 请求，通过封装 HTTP Service，我们可以将请求相关的代码高内聚，方便代码复用和维护。同时，使用 Observable 对象和 pipe 操作符，我们可以方便地处理和转换请求结果，使其符合我们的数据模型和显示需求。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7a473a941bf7134db13ea

Angular 中如何使用 TypeScript 进行 HTTP 请求

接着读