“rxjs” observable.throw 不是函數 - Angular4

Question

我一直在學習 Angular 4，一切都很順利，直到我嘗試在服務中實現捕獲處理。 我正在嘗試使用“rxjs”捕獲並拋出，但我的控制台中有一個未定義的函數錯誤。

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

我的瀏覽器中也有此警告：

./~/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

Answer 1

錯誤There are multiple modules with names that only differ in casing. 表明您嘗試使用Observable方式是針對錯誤的導入。

導入應該是大寫的“O”，如：

import { Observable } from 'rxjs/Observable';

這將導入單獨的Observable運算符，該運算符與創建的 Observable 上的catch或throw等運算符結合使用。

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

要導入完整的 Observable 對象，您可以像這樣導入它：

import { Observable } from 'rxjs/Rx'

更新：

使用較新版本的 RxJS (5.5+) 運算符，例如map()和filter()可以用作管道運算符，與pipe()結合使用，而不是鏈接。 它們是進口的，例如：

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

請記住，諸如throw類的術語在 JavaScript 中是保留字/關鍵字，因此 RxJS throw運算符被導入為：

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

更新：

對於較新版本的 RxJS (6+)，請使用：

import { throwError } from 'rxjs';

並拋出這樣的錯誤：

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

Answer 2

在 RxJS 6 中， Observable.throw()被throwError()取代，它的操作與其前身非常相似。 因此，您可以通過導入將Observable.throw(error)替換為僅throwError(error) ：

import { throwError } from 'rxjs';

查看此鏈接以獲取進一步參考： https : //www.metaltoad.com/blog/angular-6-upgrading-api-calls-rxjs-6

Answer 3

我在angular 5應用程序中遇到了同樣的問題。 我所做的是，添加一個新包。

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

從我的http服務調用中，我返回了一個函數。

return this.http.request(request)
      .pipe(map((res: Response) => res.json()),
        catchError((res: Response) => this.onError(res)));

在onError函數中，我用throwError(error)返回throwError(error) 。

onError(res: Response) {
    const statusCode = res.status;
    const body = res.json();
    const error = {
      statusCode: statusCode,
      error: body.error
    };
    return throwError(error);
  }

Answer 4

_throw 已在較新版本的 RxJS 中被丟棄
對於較新版本的 RxJS (6+)，請使用：

import { throwError } from 'rxjs';

並拋出這樣的錯誤：

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

Answer 5

在 Angular9 Observable 中：

1. 如果數據到達且狀態正常，則發送數據
2. 如果數據的 STATUS 不正常，則拋出錯誤

myObsFunc(): Observable<any> { 
  return this.http.get<any>('/api/something') 
    .pipe(
      /* Catch a backend error and let the component know */
      catchError( err => {
        /* Rethrow error */
        return throwError( err );
      }),
      map( (res)=> {
        if( res.STATUS == "OK" ) {
          /* Send DATA to subscriber */
          return Object.values( res.DATA)
        } else {
           /* Inform subscriber that a functional error occured */
           throw ( "getOrphans: Status is not OK but "+ res.STATUS ) ;
        }   
      }),
    )   
}