无法在 angular 5 中使用 HttpClient

Question

我正在尝试使用 angular 5 中的 HTTPClient 进行 api 调用，但出现以下错误：

DOMException: Failed to set the 'responseType' property on 'XMLHttpRequest': The response type cannot be changed for synchronous requests made from a document. at Observable._subscribe (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:229447:34) at Observable._trySubscribe (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:19762:25) at Observable.subscribe (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:19750:93) at Object.subscribeToResult (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:24782:27) at MergeMapSubscriber._innerSub (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:50664:38) at MergeMapSubscriber._tryNext (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:50661:14) at MergeMapSubscriber._next (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:50644:18) at MergeMapSubscriber.Subscriber.next (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:24556:18) at ScalarObservable._subscribe (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:55704:24) at ScalarObservable.Observable._trySubscribe (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:19762:25)

代码非常基础。但是，只需提及这是一个使用 NgUpgrade 模块的混合应用程序。

angularjs version 1.5.x angular version 5.1.3

import {Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http";
import {MyService} from "./my-service";
@Injectable()
export default class ResultsService {
   constructor( private http: HttpClient, private service: MyService) {
}
   purchaseByExtractId(extractId, address) {
       let payload = {
           session_key: key,
           admin_district: address
       };

       return this.http.post(this.service.getUrl(), {postData: payload}).toPromise();
   }

   purchaseExtractSummary(key) {
      return this.http.post(this.service.getUrl(), {postData: {session_key: key}}).toPromise();
   }
}

编辑：我尝试删除 toPromise 并也进行订阅。它仍然失败并出现相同的错误

Answer 1

试试这个：

purchaseByExtractId(key: string, address: string) {
        let bodyString = JSON.stringify({ session_key: key, admin_district: address });
        let headers = new HttpHeaders({ 'Content-Type': 'application/JSON' });
        return this.http.post<any>(this.service.getUrl(), bodyString, { headers: headers });

Answer 2

1) 是否添加了 import 'rxjs/add/operator/toPromise'; ？

2) this.service.getUrl() 的响应是什么？

3) 你导入模块了吗:

import { HttpsRequestInterceptor } from './services/http.interceptor'; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

4) 你添加到 providers 了吗： { provide: HTTP_INTERCEPTORS, useClass: HttpsRequestInterceptor, multi: true }, ?

5) 你添加到 imports: HttpClientModule ?

6) 你是否正确使用了拦截器？

这是http.interceptor.ts

的例子

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class HttpsRequestInterceptor implements HttpInterceptor {
    private actionUrl: string;

    constructor(
    ) {
        this.actionUrl = 'https://example.com/';
    }


    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const _req = {
            url: this.actionUrl + req.url,
            headers: req.headers.set('Content-Type', 'application/json')
        };

        return next.handle(req.clone(_req));
    }
}

希望对您有所帮助

Answer 3

为了其他人的利益，我在这里回答我自己的问题。原因是 Onikute 在对原始 post 的评论之一中提到的。我在页面上包含一个跟踪库，该库正在进行同步调用并且弄乱了 angular HTTP 请求。不久前就想到了这一点，但忘记更新答案。感谢 Onikute 提醒。

无法在 angular 5 中使用 HttpClient

Not able to use HttpClient in angular 5

angular

angular-httpclient