Question

我目前正在尝试使Angular 7应用程序能够正确地被Google抓取，但是不幸的是，当我订阅或尝试将其转换为Promise时，使用HttpClient似乎会带来一些麻烦。

使用HttpClient时，chrome 41引发以下错误：

TypeError: Cannot read property 'call' of undefined {stack: (...), message: "Cannot read property 'call' of undefined"}
errors.ts:35defaultErrorLogger
error_handler.ts:51push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError
application_ref.ts:230next
event_emitter.ts:110push../node_modules/@angular/core/fesm5/core.js.EventEmitter.subscribe.schedulerFn
Subscriber.ts:266push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub
Subscriber.ts:208push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next
Subscriber.ts:140push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next
Subscriber.ts:100push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next
Subject.ts:71push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next
event_emitter.ts:92push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit
ng_zone.ts:296(anonymous function)
zone.js:391push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke
zone.js:150push../node_modules/zone.js/dist/zone.js.Zone.run
ng_zone.ts:218push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular
ng_zone.ts:296onHandleError
zone.js:395push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError
zone.js:245push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask
zone.js:261push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask
zone.js:1194scheduleMacroTaskWithCurrentZone
zone.js:3371(anonymous function)
zone.js:1518push../node_modules/zone.js/dist/zone.js.proto.(anonymous function)
xhr.ts:319push../node_modules/@angular/common/fesm5/http.js.HttpXhrBackend.handle
Observable.ts:239push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe
Observable.ts:221push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe
subscribeToResult.ts:29subscribeToResult
mergeMap.ts:156push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub
mergeMap.ts:149push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext
mergeMap.ts:132push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next
Subscriber.ts:100push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next
subscribeToArray.ts:11push../node_modules/rxjs/_esm5/internal/util/subscribeToArray.js.subscribeToArray
Observable.ts:239push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe
Observable.ts:221push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe
mergeMap.ts:111push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call
Observable.ts:215push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe
filter.ts:72push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call
Observable.ts:215push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe
map.ts:60push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call
Observable.ts:215push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe
...
...
...

我通过替换以下内容进行了简单的检查：

  this.http.get(endpoint, this.requestHeaders).toPromise()

由此：

  this.http.get(endpoint, this.requestHeaders)

错误消失了，但是我无法在水龙头内解决我的诺言，因此对我而言并不是真正有用。知道出了什么问题吗？

Answer 1

我非常确定您的订阅函数的参数不正确。

它应该具有如下功能。

return this.http.get(filename, {responseType: 'text'})
    .subscribe(
        data => { 
            this.log(filename, data);
        },
        error => { 
            this.logError(filename, error);
        });

更新：

请在caniuse.com的浏览器版本中查看Promise的兼容性。因此，Chrome 41不支持Promise类，并且仅Chrome 63支持。

另一点是， Chrome版本4-41 中也不支持ES6 classes。

Answer 2

我知道了。为了使它适用于chrome 41，我必须按以下方式重写我的调用：

import {
    map,
    catchError
} from 'rxjs/operators'
import {throwError} from 'rxjs'

然后

 public fetch(): Promise<object> {
    const endpoint = `http://myendpoint`
    const headers = {}

    let result = this.http.get(endpoint, headers)
        .pipe(
                map((data: any) => {
                    return data;
                }),
                catchError((err: any) => {
                    return throwError(err);
                })
            )

        return new Promise((resolve, reject) => {
            result.subscribe((data) => {
                resolve(data)
            })
        });
}

可观察到的似乎不适用于Chrome 41

2 个答案: