我一直在学习Angular 4,一切顺利,直到我尝试在服务中实现catch处理。我正在尝试使用“rxjs”catch并抛出,但我的控制台中有一个未定义的函数错误。
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
错误There are multiple modules with names that only differ in casing.
表示错误的导入是针对您尝试使用Observable
的方式。
导入应该是大写“O”,如:
import { Observable } from 'rxjs/Observable';
这将导入单独的Observable
运算符,该运算符与创建的Observables上的catch
或throw
等运算符结合使用。
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
要导入完整的Observable对象,您可以像这样导入它:
import { Observable } from 'rxjs/Rx'
希望这有帮助!
更新:
对于较新版本的RxJS(5.5+),map()
和filter()
等运算符可以与pipeable operators结合使用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) )
在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
查看此链接以获取更多参考: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)
函数中,我将使用onError(res: Response) {
const statusCode = res.status;
const body = res.json();
const error = {
statusCode: statusCode,
error: body.error
};
return throwError(error);
}
返回错误。
qazxswpoi