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的提醒。

无法在角度5中使用HttpClient

3 个答案: