我该如何使用requests、fetch和拦截器？

Question

我在使用 Angular 拦截器时遇到了问题。我有一个 fetch 的 HTTP GET 请求，我想要在请求失败时通过拦截器捕获错误。但是当我发送 GET 请求时，我的拦截器无法工作。拦截器无法看到这个请求。当我编辑 GET 请求并使用 HttpClient（this.http.get...）时，一切都正常，能够工作。我该如何同时使用 fetch 和拦截器？

@Injectable()
export class TestInterceptor implements HttpInterceptor {

  constructor() {
    console.log('constructor of interceptor');
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('interceptor work');
    return next.handle(req);
  }
}

@NgModule({
  declarations: [
    TestComponent
  ],
  imports: [
    SharedModule,
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TestInterceptor,
      multi: true
    },
  ]
})
export class TestModule {}

sendRequest(url: string, method = 'GET', body = null): Promise<any> {
    let response: Response;

    return fetch(url, {
      method,
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: body ? JSON.stringify(body) : null
    });
  }

- asuchoj

---

你能提供更多细节和一些代码示例吗？ - f.khantsis

Answer 1

简而言之：您需要使用HttpClient来拦截请求，仅使用fetch()将无法工作。尽管文档中没有超级明确地说明，但是它是由以下两个方面暗示的：

• HttpInterceptor使用注意事项中提到，拦截绑定到HttpClientModule（应该只导入一次，然后使用HttpClient引用）
• HttpClient指南提到："如果没有拦截，开发人员将不得不为每个HttpClient方法调用显式地实现这些任务。"

- vlz

Answer 2

将其添加到app.module.ts中的providers中

{
      provide: HTTP_INTERCEPTORS,
      useClass: ApiGatewayInterceptor,
      multi: true,
    }

创建通用服务：

import { Injectable,OnInit,Component } from '@angular/core';
import {Http,Headers,RequestOptions, RequestOptionsArgs,Response} from '@angular/http';
import { HttpEvent, HttpHeaders,HttpHandler, HttpInterceptor, HttpRequest, HttpClient,HttpParams,HttpResponse,HttpErrorResponse } from '@angular/common/http';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise'; 

import { environment } from '../../environments/environment';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/throw'
import 'rxjs/add/operator/catch';   


@Injectable()
export class ApiGatewayInterceptor implements HttpInterceptor {
    private queryParam: string = '';
    constructor() { }

    public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 



    }
}

使用API网关调用如下：

     formUrlParam(data) {
        let queryString: string = ''; 
        let httpParams = new HttpParams();
        Object.keys(data).forEach(function (key) {
            httpParams = httpParams.append(key, data[key]);
        }); 
        return httpParams; 
    }
    post<T>(url, params)  { 
        let httpParams = this.formUrlParam(params);  
        return new Promise((resolve, reject) => { 
            let result = this.http.post(url,params).subscribe(
                (response) => resolve(response),
                (error) => resolve(error)
            ) 
        });  
    }

    patch<T>(url, params)  { 
        console.log(params);
        let httpParams = this.formUrlParam(params);  
        return new Promise((resolve, reject) => { 
            let result = this.http.patch(url,params).subscribe(
                (response) => resolve(response),
                (error) => resolve(error)
            ) 
        });  
    } 
    get<T>(url,params) {
        let httpParams = this.formUrlParam(params); 
        return new Promise((resolve, reject) => { 
            let result = this.http.get(url,{params: httpParams }).subscribe(
                (response) => resolve(response),
                (error) => resolve(error)
            ) 
        });  
    } 

- Avinash Dalvi

---

这能解决上述问题吗？看起来仍然依赖于来自HttpClient的调用？ - tcrite