热门标签 | 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 请求,并同时获取响应头和响应体。


推荐阅读
  • Python + Pytest 接口自动化测试中 Token 关联登录的实现方法
    本文将深入探讨 Python 和 Pytest 在接口自动化测试中如何实现 Token 关联登录,内容详尽、逻辑清晰,旨在帮助读者掌握这一关键技能。 ... [详细]
  • 黑马头条项目:Vue 文章详情模块与交互功能实现
    本文详细介绍了如何在黑马头条项目中配置文章详情模块的路由、获取和展示文章详情数据,以及实现关注、点赞、不喜欢和评论功能。通过这些步骤,您可以全面了解如何开发一个完整的前端文章详情页面。 ... [详细]
  • 深入解析动态代理模式:23种设计模式之三
    在设计模式中,动态代理模式是应用最为广泛的一种代理模式。它允许我们在运行时动态创建代理对象,并在调用方法时进行增强处理。本文将详细介绍动态代理的实现机制及其应用场景。 ... [详细]
  • 微信小程序:授权登录与手机号绑定
    本文详细介绍了微信小程序中用户授权登录及绑定手机号的流程,结合官方指引和实际开发经验,提供了一套完整的实现方案,帮助开发者更好地理解和应用。 ... [详细]
  • 软件工程课堂测试2
    要做一个简单的保存网页界面,首先用jsp写出保存界面,本次界面比较简单,首先是三个提示语,后面是三个输入框,然 ... [详细]
  • CentOS 7.6环境下Prometheus与Grafana的集成部署指南
    本文旨在提供一套详细的步骤,指导读者如何在CentOS 7.6操作系统上成功安装和配置Prometheus 2.17.1及Grafana 6.7.2-1,实现高效的数据监控与可视化。 ... [详细]
  • 利用Selenium与ChromeDriver实现豆瓣网页全屏截图
    本文介绍了一种使用Selenium和ChromeDriver结合Python代码,轻松实现对豆瓣网站进行完整页面截图的方法。该方法不仅简单易行,而且解决了新版Selenium不再支持PhantomJS的问题。 ... [详细]
  • Redux入门指南
    本文介绍Redux的基本概念和工作原理,帮助初学者理解如何使用Redux管理应用程序的状态。Redux是一个用于JavaScript应用的状态管理库,特别适用于React项目。 ... [详细]
  • 云函数与数据库API实现增删查改的对比
    本文将深入探讨使用云函数和数据库API实现数据操作(增删查改)的不同方法,通过详细的代码示例帮助读者更好地理解和掌握这些技术。文章不仅提供代码实现,还解释了每种方法的特点和适用场景。 ... [详细]
  • This post discusses an issue encountered while using the @name annotation in documentation generation, specifically regarding nested class processing and unexpected output. ... [详细]
  • 为了解决不同服务器间共享图片的需求,我们最初考虑建立一个FTP图片服务器。然而,考虑到项目是一个简单的CMS系统,为了简化流程,团队决定探索七牛云存储的解决方案。本文将详细介绍使用七牛云存储的过程和心得。 ... [详细]
  • 本文介绍了如何在React和React Native项目中使用JavaScript进行日期格式化,提供了获取近7天、近半年及近一年日期的具体实现方法。 ... [详细]
  • Python自动化测试入门:Selenium环境搭建
    本文详细介绍如何在Python环境中安装和配置Selenium,包括开发工具PyCharm的安装、Python环境的设置以及Selenium包的安装方法。此外,还提供了编写和运行第一个自动化测试脚本的步骤。 ... [详细]
  • 本文详细介绍了一种高效的算法——线性筛法,用于快速筛选出一定范围内的所有素数。通过该方法,可以显著提高求解素数问题的效率。 ... [详细]
  • 本文深入探讨了UNIX/Linux系统中的进程间通信(IPC)机制,包括消息传递、同步和共享内存等。详细介绍了管道(Pipe)、有名管道(FIFO)、Posix和System V消息队列、互斥锁与条件变量、读写锁、信号量以及共享内存的使用方法和应用场景。 ... [详细]
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社区 版权所有