“rxjs"observable.throw 不是函数 - Angular4

问题描述

我一直在学习 Angular 4，一切都很顺利，直到我尝试在服务中实现捕获处理.我正在尝试使用rxjs"捕获并抛出，但我的控制台中有一个未定义的函数错误.

I've been learning Angular 4 and everything was going smoothly until I tried to implement catch handling in a service. I'm trying to use "rxjs" catch and throw but I've got an undefined function error in my console.

import { Injectable } from '@angular/core';
import { Http } from "@angular/http";
import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import { AppError } from "../app/common/app.error";
import { NotFoundError } from "../app/common/not-found-error";
import { BadInput } from "../app/common/bad-input";

@Injectable()
export class PostService {
  private url = "https://jsonplaceholder.typicode.com/posts";

  constructor(private http: Http) { }

 deletepost(post){
      // return this.http.delete(this.url + '/' + post.id)
      // Hard-coded id to test 404
      return this.http.delete(this.url + '/' + 93498)
        .catch((error: Response) => {
          console.log('error within catch is ' + Response)
          if(error.status === 404)
            return Observable.throw(new NotFoundError(error));

          return Observable.throw(new AppError(error));
        });
    }
}

这是错误信息:

TypeError: __WEBPACK_IMPORTED_MODULE_2_rxjs_observable__["Observable"].throw is not a function.
(In '__WEBPACK_IMPORTED_MODULE_2_rxjs_observable__["Observable"].throw(new
__WEBPACK_IMPORTED_MODULE_6__app_common_not_found_error__["a" /* NotFoundError
*/](error))',
'__WEBPACK_IMPORTED_MODULE_2_rxjs_observable__["Observable"].throw' is
undefined) — post.service.ts:42

我的浏览器中也有此警告:

I also have this warning in my browser:

./~/rxjs/Observable.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/nickgowdy/Desktop/Angular2/angular4 source code/hello-world/node_modules/rxjs/Observable.js
    Used by 14 module(s), i. e.
    /Users/nickgowdy/Desktop/Angular2/angular4 source code/hello-world/node_modules/@angular/core/@angular/core.es5.js
* /Users/nickgowdy/Desktop/Angular2/angular4 source code/hello-world/node_modules/rxjs/observable.js
    Used by 1 module(s), i. e.
    /Users/nickgowdy/Desktop/Angular2/angular4 source code/hello-world/node_modules/@ngtools/webpack/src/index.js!/Users/nickgowdy/Desktop/Angular2/angular4 source code/hello-world/src/services/post.service.ts

推荐答案

错误 有多个模块的名称只是大小写不同. 表明错误的导入是针对您的方式尝试使用 Observable.

The error There are multiple modules with names that only differ in casing. is indicating the wrong import is being targeted with how you are trying to use Observable.

导入应该以大写的O"开头，例如:

The import should be with a capital "O" like:

import { Observable } from 'rxjs/Observable';

这将导入单独的 Observable 操作符，这些操作符与 catch 或 throw 等操作符结合使用在创建的 Observable 上.>

This will import the individual Observable operator, which be used in combination with operators such as catch or throw on created Observables.

import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

要导入完整的 Observable 对象，您可以像这样导入:

To import the full Observable object you'd import it like this:

import { Observable } from 'rxjs/Rx'

更新:

使用较新版本的 RxJS (5.5+) 运算符，例如 map() 和 filter() 可以用作 pipeable operators 与 pipe() 结合而不是链接.它们是导入的，例如:

With newer versions of RxJS (5.5+) operators such as map() and filter() can used as pipeable operators in combination with pipe() rather than chaining. They are imported such as:

import { filter, map, catchError } from 'rxjs/operators';

请记住，诸如 throw 之类的术语在 JavaScript 中是保留字/关键字，因此 RxJS throw 运算符被导入为:

Keep in mind terms such as throw are reserved/key words in JavaScript so the RxJS throw operator is imported as:

import { _throw } from 'rxjs/observable/throw';

更新:

对于较新版本的 RxJS (6+)，请使用:

For newer versions of RxJS (6+), use this:

import { throwError } from 'rxjs';

并抛出这样的错误:

if (error.status === 404)
    return throwError( new NotFoundError(error) )

这篇关于“rxjs"observable.throw 不是函数 - Angular4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！