ChatGPT解决这个技术问题 Extra ChatGPT

Angular 4.3.3 HttpClient:如何从响应的标头中获取值?

(编辑器:VS Code;打字稿:2.2.1)

目的是获取请求响应的标头

假设服务中带有 HttpClient 的 POST 请求

import {
    Injectable
} from "@angular/core";

import {
    HttpClient,
    HttpHeaders,
} from "@angular/common/http";

@Injectable()
export class MyHttpClientService {
    const url = 'url';

    const body = {
        body: 'the body'
    };

    const headers = 'headers made with HttpHeaders';

    const options = {
        headers: headers,
        observe: "response", // to display the full response
        responseType: "json"
    };

    return this.http.post(sessionUrl, body, options)
        .subscribe(response => {
            console.log(response);
            return response;
        }, err => {
            throw err;
        });
}

HttpClient Angular Documentation

第一个问题是我有一个打字稿错误:

'Argument of type '{ 
    headers: HttpHeaders; 
    observe: string; 
    responseType: string;
}' is not assignable to parameter of type'{ 
    headers?: HttpHeaders;
    observe?: "body";
    params?: HttpParams; reportProgress?: boolean;
    respons...'.

Types of property 'observe' are incompatible.
Type 'string' is not assignable to type '"body"'.'
at: '51,49' source: 'ts'

确实,当我转到 post() 方法的 ref 时,我指向这个原型(我使用 VS 代码)

post(url: string, body: any | null, options: {
        headers?: HttpHeaders;
        observe?: 'body';
        params?: HttpParams;
        reportProgress?: boolean;
        responseType: 'arraybuffer';
        withCredentials?: boolean;
    }): Observable<ArrayBuffer>;

但我想要这个重载的方法:

post(url: string, body: any | null, options: {
    headers?: HttpHeaders;
    observe: 'response';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
}): Observable<HttpResponse<Object>>;

所以,我试图用这个结构来修复这个错误:

  const options = {
            headers: headers,
            "observe?": "response",
            "responseType?": "json",
        };

它编译!但我只是得到了 json 格式的正文请求。

此外,为什么我必须放一个?某些字段名称末尾的符号?正如我在 Typescript 网站上看到的,这个符号应该告诉用户它是可选的?

我还尝试使用所有字段,不带和带 ?分数

编辑

我尝试了 Angular 4 get headers from API response 提出的解决方案。对于地图解决方案:

this.http.post(url).map(resp => console.log(resp));

Typescript 编译器告诉 map 不存在,因为它不是 Observable 的一部分

我也试过这个

import { Response } from "@angular/http";

this.http.post(url).post((resp: Response) => resp)

它编译,但我得到一个不受支持的媒体类型响应。这些解决方案应该适用于“Http”,但不适用于“HttpClient”。

编辑 2

我还使用@Supamiu 解决方案获得了不受支持的媒体类型,所以这将是我的标题上的错误。所以上面的第二个解决方案(带有响应类型)也应该有效。但就个人而言,我认为将“Http”与“HttpClient”混合不是一个好方法,所以我会保留 Supamiu 的解决方案

@Hitmands 我已经看到了这个线程,但是它使用 "Http" 而不是 "HttpClient" ,而 Angular 4.3.3 现在似乎倾向于使用 HttpClient

M
Mattew Eon

您可以观察完整的响应,而不仅仅是内容。为此,您必须将 observe: response 传递给函数调用的 options 参数。

http
  .get<MyJsonData>('/data.json', {observe: 'response'})
  .subscribe(resp => {
    // Here, resp is of type HttpResponse<MyJsonData>.
    // You can inspect its headers:
    console.log(resp.headers.get('X-Custom-Header'));
    // And access the body directly, which is typed as MyJsonData as requested.
    console.log(resp.body.someField);
  });

请参阅HttpClient's documentation


谢谢!我得到了一个不受支持的数据类型,但这在我的标题上是一个错误
有谁知道如何为 http.patch() 做同样的事情?它对我不起作用。当我想要带有状态码的原始响应对象时,响应是空的。
好的,我刚刚发现:它是 http.patch(url, params, {observe: 'response'}) 并确保响应对象的类型为 HttpResponse
谢谢!我试过这个,但我没有得到出现在网络标签中 Response Headers 中的值。
这对我来说太 hacky tbh,如果这是使它工作的唯一方法,并且使它工作,这意味着它是可能的并且应该集成到 API 中,我会报告它作为一个问题。
B
Birbal Singh

类型转换的主要问题,因此我们可以将“响应”用作“正文”

我们可以处理

const options = {
    headers: headers,
    observe: "response" as 'body', // to display the full response & as 'body' for type cast
    responseType: "json"
};

return this.http.post(sessionUrl, body, options)
    .subscribe(response => {
        console.log(response);
        return response;
    }, err => {
        throw err;
    });

那个排版部分为我节省了很多时间和压力。谢谢辛格(Y)
我有一个要访问的变量“Set-Cookie”,其值中有令牌。怎么做 ?
我在这里有类似的问题stackoverflow.com/questions/61995994/…
这个 stackoverflow.com/questions/26329825/… 很可能仍然相关。
S
SolidCanary

实际上,主要问题是 Typescript 问题。

在 post() 的代码中,选项直接在参数中声明,因此,作为“匿名”接口。

解决方案是直接将选项放在参数里面

http.post("url", body, {headers: headers, observe: "response"}).subscribe...

救生员——这让我发疯了。仍然不明白为什么内联选项哈希有效但 post("url", body, options) 没有。但是耶!
@Gishu,原因在 this answer 中解释。 this answer 中有一个对我很有效的无内联解决方案,尽管可能需要对界面进行一些更改以使其符合您的需要。
这应该可行,但对我来说不起作用,根本没有调用“发布方法”,也没有在此设置中发送或接收任何内容,只有当我将 {observe: “response”} 作为第三个时它才有效范围
K
Kevin Beal

如果您使用最佳答案中的解决方案并且您无权访问 response.headers 上的 .keys().get(),请确保您使用的是 fetch 而不是 xhr。

获取请求是默认的,但如果存在仅 xhr 的标头(例如 x-www-form-urlencoded),Angular 将使用 xhr。

如果您尝试访问任何自定义响应标头,则必须使用另一个名为 Access-Control-Expose-Headers 的标头来指定这些标头。


R
Rajantha Fernando

有时即使使用上述解决方案,如果是 CORS 请求,您也无法检索自定义标头。在这种情况下,您需要在服务器端将所需的标头列入白名单。

例如:Access-Control-Expose-Headers:X-Total-Count


T
Tom el Safadi

下面的方法对我来说非常有效(目前是 Angular 10)。它还避免设置一些任意文件名,而是从 content-disposition 标头获取文件名。

this._httpClient.get("api/FileDownload/GetFile", { responseType: 'blob' as 'json', observe: 'response' }).subscribe(response =>  { 
    /* Get filename from Content-Disposition header */
    var filename = "";
    var disposition = response.headers.get('Content-Disposition');
    if (disposition && disposition.indexOf('attachment') !== -1) {
        var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
        var matches = filenameRegex.exec(disposition);
        if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
    }
    // This does the trick
    var a = document.createElement('a');
    a.href = window.URL.createObjectURL(response.body);
    a.download = filename;
    a.dispatchEvent(new MouseEvent('click'));
})

这段代码可以更加模块化,但你的答案正是我想要的
很高兴它帮助了你:) @PawelCioch
这么说,我遇到的问题(角度 8)与这个确切的代码我看不到标题,知道吗? API 100% 返回 Content-Disposition 标头,因为我对其进行了编码,而且我可以在浏览器请求调试/网络控制台中看到它
我没有用 Angular 8 尝试过,但我认为它会是一样的。也许有一个稍微不同的语法。 @PawelCioch
N
Navid Shad

正如其他开发人员所说,为了将 headers 和 body 放在一起,您应该以这种方式定义观察者 yield 的类型:

http.post("url", body, {headers: headers, observe: "response" as "body"})

然后您可以访问 pip 或订阅区域中的正文和标题:

http.post("url", body, {headers: headers, observe: "response" as "body"})
.pip(
  tap(res => {
   // res.headers
   // res.body
  })
)
.subscribe(res => {
   // res.headers
   // res.body
})

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

领先一步获取最新的外包任务吗?

立即订阅