无法在角度5中使用HttpClient

Question

我正在尝试使用角度为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版本1.5.x角度版本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

1）你是否添加了导入'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 2

试试这个：

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 3

为了其他人的利益，我在这里回答我自己的问题。原因是Onikute在原始帖子的评论中提到了什么。我在页面上有一个跟踪库，它正在进行同步调用，并且正在搞乱角度HTTP请求。曾经想过这一段时间，但忘了更新答案。感谢Onikute提醒。