Angular 从入坑到挖坑 - HTTP 请求概览 (2)

在组件中，通过调用注入的服务类完成接口数据的获取，因为是以一种结构化对象的形式获取到接口返回的数据，因此这里可以直接通过对象属性获取到指定的属性信息

import { Component, OnInit } from '@angular/core'; // 引入服务 import { AntiMotivationalQuotesServicesService } from './../services/anti-motivational-quotes-services.service'; // 引入接口响应对象 import { GetQuotesResponseModel } from '../interfaces/get-quotes-response-model'; @Component({ selector: 'app-anti-motivational-quotes', templateUrl: './anti-motivational-quotes.component.html', styleUrls: ['./anti-motivational-quotes.component.scss'] }) export class AntiMotivationalQuotesComponent implements OnInit { public quoteResponse: GetQuotesResponseModel; // 通过构造函数注入的方式使用服务 constructor(private services: AntiMotivationalQuotesServicesService) { } ngOnInit(): void { } /** * 获取毒鸡汤 */ getQuotes() { this.services.getAntiMotivationalQuotes().subscribe((response: GetQuotesResponseModel) => { this.quoteResponse = response; }); } }

因为最终需要的信息是接口返回的响应信息对象中的一个属性，因此这里需要使用安全导航运算符（?）来确保模板的渲染不会因为空指针错误而中断

<p> <button (click)="getQuotes()">获取毒鸡汤</button> </p> <p> 接口返回信息: {{quoteResponse | json}} </p> <i> 毒鸡汤：{{quoteResponse?.data?.content}} </i>

在执行服务中的方法时，有时会存在没有回调函数的情况，此时也必须执行 subscribe 方法，否则服务中的 HTTP 请求是没有真正发起的

服务中的 getAntiMotivationalQuotes 只能获取到接口返回的 body 里面的信息，某些情况下需要获取到完整的响应信息，此时需要通过 observe 参数来告诉 HttpClient 此方法需要返回完整的响应信息

import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; // 引入 HttpClient 类 import { HttpClient, HttpResponse } from '@angular/common/http'; // 引入接口响应类 import { GetQuotesResponseModel } from '../interfaces/get-quotes-response-model'; @Injectable({ providedIn: 'root' }) export class AntiMotivationalQuotesServicesService { // 通过构造函数注入的方式依赖注入到使用的类中 constructor(private http: HttpClient) { } /** * 获取完整的接口请求信息 */ getAntiMotivationalQuotesResponse(): Observable<HttpResponse<GetQuotesResponseModel>> { const url = 'http://api.tryto.cn/djt/text'; return this.http.get<GetQuotesResponseModel>(url, { observe: 'response' }); } } import { HttpResponse } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; // 引入服务 import { AntiMotivationalQuotesServicesService } from './../services/anti-motivational-quotes-services.service'; // 引入接口响应对象 import { GetQuotesResponseModel } from '../interfaces/get-quotes-response-model'; @Component({ selector: 'app-anti-motivational-quotes', templateUrl: './anti-motivational-quotes.component.html', styleUrls: ['./anti-motivational-quotes.component.scss'] }) export class AntiMotivationalQuotesComponent implements OnInit { public quoteResponseInfo: HttpResponse<GetQuotesResponseModel>; // 通过构造函数注入的方式使用服务 constructor(private services: AntiMotivationalQuotesServicesService) { } ngOnInit(): void { } /** * 获取毒鸡汤接口完整的请求信息 */ getQuotesResponse() { this.services.getAntiMotivationalQuotesResponse().subscribe((response: HttpResponse<GetQuotesResponseModel>) => { this.quoteResponseInfo = response; }); } }

HttpClient 默认的返回信息格式都是 json 对象，在后端接口返回的并不是 json 对象的情况下，需要手动的设置响应类型（text、blob、arraybuffer...）

import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; // 引入 HttpClient 类 import { HttpClient, HttpResponse } from '@angular/common/http'; // 引入接口响应类 import { GetQuotesResponseModel } from '../interfaces/get-quotes-response-model'; @Injectable({ providedIn: 'root' }) export class AntiMotivationalQuotesServicesService { // 通过构造函数注入的方式依赖注入到使用的类中 constructor(private http: HttpClient) { } /** * 获取响应类型非 json 对象的信息 */ getYuiterSitemap(): Observable<string> { const url = 'https://yuiter.com/sitemap.xml'; return this.http.get(url, { responseType: 'text' }); } }