热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何在Angular6HttpClient中获取响应头

本文介绍如何使用Angular6的HttpClient模块来获取HTTP响应头,包括代码示例和常见问题的解决方案。

在 Angular 6 中,HttpClient 提供了强大的功能来处理 HTTP 请求。为了获取完整的响应信息(包括响应头),我们需要对请求进行一些调整。

下面是一个改进后的 api.service.ts 示例,展示了如何正确地获取响应头:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import { HttpClient } from '@angular/common/http';

import { Injectable, isDevMode } from '@angular/core';

import { NzNotificationService } from 'ng-zorro-antd';

import { UtilService } from '@/services/util.service';

@Injectable()
export class ApiService {
  async request(method, url, data = {}) {
    const headers = {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${localStorage.getItem('token')}`,
    };
    const trim = s => s === undefined || s === null ? '' : s;
    const args = [
      window['baseUrl'],
      url.replace(/:([^&;/?]+)/g, (...s) => trim(data[s[1]])),
    ].join('/');

    const params = Object.keys(data).reduce((obj, key) => {
      obj[key] = trim(data[key]);
      return obj;
    }, {});

    const optiOns= {
      observe: 'response' as 'response', // 获取完整响应对象
      responseType: 'json'
    };

    try {
      const requestData = {
        url: args,
        method: method,
      };
      console.log(args);

      const respOnse= await this.http[method](args, { ...options, headers, params }).toPromise();
      console.log(response.headers); // 打印响应头
      return response.body;
    } catch (e) {
      console.error(e);
      if (e.status !== 401) {
        // this.notify.create('error', `${e.status}`, e.error.message);
      } else {
        localStorage.clear();
        this.util.navigate(['/user/login']);
      }
      throw e;
    }
  }

  delete = (url) => (data?) => this.request('delete', url, data);
  get = (url) => (data?) => this.request('get', url, data);
  patch = (url) => (data?) => this.request('patch', url, data);
  post = (url) => (data?) => this.request('post', url, data);
  put = (url) => (data?) => this.request('put', url, data);

  constructor(
    private http: HttpClient,
    private notify: NzNotificationService,
    private util: UtilService,
  ) { }
}

在上面的代码中,我们通过设置 observe: 'response' 来确保我们可以访问完整的响应对象,包括响应头。然后可以通过 response.headers 来获取响应头的内容。

如果你希望在组件中使用 subscribe 而不是 toPromise,可以按照以下方式进行调整:

1
2
3
4
5
6
7
8
9
10
11
12
async getData(index?) {
  this.loading = true;
  this.currentPage = index;
  this.api.get('accounts')({
    page: this.currentPage,
    'per-page': this.limits
  }).subscribe(resp => {
    console.log(resp.headers); // 打印响应头
    console.log(resp.body); // 打印响应体
    this.loading = false;
    this.data = resp.body;
    this.totalCount = resp.body._meta.totalCount;
  });
}

通过这种方式,你可以轻松地在组件中订阅 HTTP 请求,并同时获取响应头和响应体。


推荐阅读
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • Explore a common issue encountered when implementing an OAuth 1.0a API, specifically the inability to encode null objects and how to resolve it. ... [详细]
  • 本文详细介绍了如何使用PHP检测AJAX请求,通过分析预定义服务器变量来判断请求是否来自XMLHttpRequest。此方法简单实用,适用于各种Web开发场景。 ... [详细]
  • 本文探讨了 RESTful API 和传统接口之间的关键差异,解释了为什么 RESTful API 在设计和实现上具有独特的优势。 ... [详细]
  • 本文详细介绍了中央电视台电影频道的节目预告,并通过专业工具分析了其加载方式,确保用户能够获取最准确的电视节目信息。 ... [详细]
  • 本文探讨了在 Vue 2.0 项目中使用 Axios 获取数据时可能出现的错误,并提供详细的解决方案和最佳实践。 ... [详细]
  • 本文详细解析了如何使用Python的urllib模块发起POST请求,并通过实例展示如何爬取百度翻译的翻译结果。 ... [详细]
  • 本文探讨了在UC浏览器中调用分享面板后,图片无法正常显示的问题,并提供了详细的解决方法和代码示例。 ... [详细]
  • 选择适合生产环境的Docker存储驱动
    本文旨在探讨如何在生产环境中选择合适的Docker存储驱动,并详细介绍不同Linux发行版下的配置方法。通过参考官方文档和兼容性矩阵,提供实用的操作指南。 ... [详细]
  • 本文深入探讨了HTTP请求和响应对象的使用,详细介绍了如何通过响应对象向客户端发送数据、处理中文乱码问题以及常见的HTTP状态码。此外,还涵盖了文件下载、请求重定向、请求转发等高级功能。 ... [详细]
  • PHP 过滤器详解
    本文深入探讨了 PHP 中的过滤器机制,包括常见的 $_SERVER 变量、filter_has_var() 函数、filter_id() 函数、filter_input() 函数及其数组形式、filter_list() 函数以及 filter_var() 和其数组形式。同时,详细介绍了各种过滤器的用途和用法。 ... [详细]
  • 本文详细探讨了HTML表单中GET和POST请求的区别,包括它们的工作原理、数据传输方式、安全性及适用场景。同时,通过实例展示了如何在Servlet中处理这两种请求。 ... [详细]
  • 探讨了如何解决Ajax请求响应时间过长的问题。本文分析了一个从服务器获取少量数据的Ajax请求,尽管服务器已经对JSON响应进行了缓存,但实际响应时间仍然不稳定。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 本文探讨了在不使用服务器控件的情况下,如何通过多种方法获取并修改页面中的HTML元素值。除了常见的AJAX方式,还介绍了其他可行的技术方案。 ... [详细]
author-avatar
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有