标签: angular-httpclient

我想用拦截器排除一些服务.

app.module.js

providers: [
    UserService,
    RolesService,
    {
        provide: HTTP_INTERCEPTORS,
        useClass: TokenInterceptor,
        multi: true
      },
],

Login.service.ts

return this.httpClient.post(this.appUrl + '/oauth/token', body.toString(), { headers, observe: 'response' })
.map((res: Response) => {
  const response = res.body;
  this.storeToken(response);
  return response;
})
.catch((error: any) => {
  ErrorLogService.logError(error);
  return Observable.throw(new Error(error.status));
  });
}

我在我的 Angular 应用程序中创建了一个 REST API 调用来下载一个文件。

我将 responseType 设置为 'blob' 因为我期待一个文件作为响应。

但是当服务器上没有可用的文件时，响应的错误代码为 404，即错误请求，正文中有一些消息。

但是我无法解析来自正文的错误消息，因为 HttpErrorResponse 在 error.error 中给出了一个 blob 对象

如何从错误对象而不是 blob 中获取实际主体。

还有什么方法可以配置 angular，在 api 调用成功时解析 blob 中的请求，否则解析 json 中的请求？？？

希望得到解决

我试图HttpClient在Angular 5项目中使用POST调用,我想设置标题:

import { HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { AuthData }    from './models/auth-data';

@Injectable()
export class AuthService {

    constructor(private http: HttpClient) { }

    auth = (data: AuthData) => {

        var url = "https://.../login";
        var payload = data;
        var headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');
        var options =  {
            headers: headers
        };

        this.http.post(url, payload, options).subscribe();
    }
}

出于某种原因,Content-Type标题似乎不在我正在进行的请求中.

为什么是这样？

在我的Angular 5应用程序中,在应用程序的不同位置需要多次某个数据集(不经常更改).调用API后,结果将与Observable do运算符一起存储.这样我在我的服务中实现了HTTP请求的缓存.

我正在使用Angular 5.1.3和RxJS 5.5.6.

这是一个好习惯吗？还有更好的选择吗？

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';

@Injectable()
export class FruitService {

  fruits: Array<string> = [];

  constructor(private http: HttpClient) { }

  getFruits() {
    if (this.fruits.length === 0) {
      return this.http.get<any>('api/getFruits')
        .do(data => { this.fruits = data })
    } else {
      return Observable.of(this.fruits);
    }
  }
}

我最近试图陷入困境。我有一个分页的请求。

const myParams = new HttpParams().set('page', page.toString()).set('size', size.toString());
this.http.get<HttpResponse<User[]>>('https://localhost:8443/user/', {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
      params: myParams,
      observe: 'response'
    }).suscribe((response: HttpResponse<User[]>) => this.data = response.body);

DB中的元素总数将在X-Total-Count标头中传输到客户端。我试图这样阅读：

.suscribe((response: HttpResponse<User[]>) => {
    this.data = response.body;
    this.totalCount = response.headers.get('X-Total-Count');
});

但这是行不通的。事实证明，response.header仅包含实际http-response-header的子集。

这是标题对象的样子

"headers": {
    "normalizedNames": {},
    "lazyUpdate": null
  }

我确定X-Total-Count已发送。Firefox devtools展示了它。您能否告诉我如何将其纳入响应中？

更新

这个问题与通过以下方式被确定为重复项的问题有所不同：我没有问过如何检查完整的httpResponse。我自己弄清楚了。我一直在问为什么headers响应的属性不完整。

最近我一直在使用Angular HttpClient拦截器.

我添加了与某些HTTP GET方法相对应的标头,对于某些我不需要这些标头.

如何告诉我的拦截器有条件地将拦截器添加到那些方法？我甚至可以拆分服务,例如一个服务用于标头,一个服务没有标题,一个用于不同的标题,一个用于不同的标题.

NgModule提供商

{
  provide: HTTP_INTERCEPTORS,
  useClass: AuthInterceptor,
  multi: true,
},{
  provide: HTTP_INTERCEPTORS,
  useClass: AngularInterceptor,
  multi: true,
}

MyInterceptors

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({headers: req.headers.set('X-Auth-Token', "-------------------------")});
    return next.handle(authReq);

  }
}


@Injectable()
export class AngularInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).do(event => {}, err => {
        if(err instanceof HttpErrorResponse){
            console.log("Error Caught By Interceptor");
            //Observable.throw(err);
        }
    });
  }
}

我正在使用下面的代码尝试从响应头中提取值(ReturnStatus);

Keep-Alive: timeout=5, max=100
ReturnStatus: OK,SO304545
Server: Apache/2.4.29 (Win32) OpenSSL/1.0.2m

代码;

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

import { Account } from './model/account';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from "rxjs";
import { map, filter, catchError, mergeMap } from 'rxjs/operators';

 createOrder(url) : Observable<any> {

  return this._http.get(url, {withCredentials: true, observe: 'response'})
  .pipe(
    map((resp: any) => {
      console.log("response", resp);
      return resp;

    }), catchError( error => {
      console.log("createOrder error",error );
      alert("Create Order Service returned an error. See server …

如何通过超时运算符检测错误？我想在服务器没有响应时显示警报或类似的东西。

我的拦截器中有一个类似的代码：

this.http.post('http://localhost:3000/api/core', data)
        .pipe(
            timeout(30000),
            map((response: any) => { // Success...
              return response;
            }),
            catchError((error) => { // Error...
              // Timeout over also handled here
              // I want to return an error for timeout
              return throwError(error || 'Timeout Exception');
            }),
            finalize(() => {
              console.log('Request it is over');
            })
        );

["rxjs": "^6.0.0", "@angular/http": "^6.0.3",]

我正在尝试将支付网关合并到 angular 应用程序中，我发现以下付款合作伙伴提供的用于合并的 JavaScript 片段，我通过添加ngNoForm 对其进行了调整，并使其与 angular 一起使用；堆栈闪电战

<form ngNoForm method="post" action="https://test.pesopay.com/b2cDemo/eng/payment/payForm.jsp">
<input type="hidden" name="amount" value="1" >
<input type="hidden" name="currCode" value="608" >
<input type="hidden" name="payMethod" value="CC">
<input type="submit" name="submit">
</form>

接下来不是<Form> POST + Action直接从组件模板使用 HTML ，我想对我的后端服务器进行 REST 调用，执行其他一些步骤，并将该 API 响应映射到我的支付合作伙伴期望的内容，然后使用 HttpClient POST 重定向到我的支付合作伙伴，这将应该做同样的事情并重定向到应该负责支付过程的支付合作伙伴网站，所以简而言之，我想以编程方式实现同​​样的事情，我尝试过：

redirectToPaymentHandler(): Observable<any> {
  const urlEncodeData = 'amount=1&currCode=608&payMethod=CC';
  let headers = new HttpHeaders();
  headers = headers.append('Content-Type', 'application/x-www-form-urlencoded');
  headers = headers.append('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8');

  return this.httpClient.post('https://test.pesopay.com/b2cDemo/eng/payment/payForm.jsp',
    urlEncodeData, {
      headers,
      responseType: 'text'
    }).pipe(catchError((error) => {
      console.log(error)
      return …

从本质上来说，我的问题是-我有6个不同的端点返回不同的数字-我希望能够异步发送6个请求，但是使用chrome工具，我看到它们不按顺序运行。

  ngOnInit() {
    private readonly TEMP_URL: string = 'https://www.random.org/integers/?num=1&min=1&max=100000&col=1&base=10&format=plain&rnd=new';
    const result1 = this.http.get<Number>(this.TEMP_URL);
    const result2 = this.http.get<Number>(this.TEMP_URL);
    const result3 = this.http.get<Number>(this.TEMP_URL);
    const result4 = this.http.get<Number>(this.TEMP_URL);
    const result5 = this.http.get<Number>(this.TEMP_URL);
    const result6 = this.http.get<Number>(this.TEMP_URL);
    const result7 = this.http.get<Number>(this.TEMP_URL);


    forkJoin(result1,result2,result3,result4,result5,result6,result7).subscribe(results  => {
                    this.retVal0= results[0];
                    this.retVal1 = results[1];
                    this.retVal2 = results[2];
                    this.retVal3= results[3];
                    this.retVal4= results[4];
                    this.retVal5= results[5];
                    this.retVal6= results[6];
                    this.retVal7= results[7];
            });
  };