[英]Updating Services from Angular 2/4 to Angular 7
更新服務以在Angular 7中運行。我有兩個我正在審查的函數 - 一個登錄功能和一個獲取用戶信息功能。
我一直在使用'@ angular / http'中的模塊import {Http,Response,RequestOptionsArgs,Headers};
我無法找到有關遷移的指導。
login(request: LoginUserRequest): Observable<LoginUserResponse> {
var options:RequestOptionsArgs ={};
options.headers = new Headers();
options.headers.append("content-type", "application/x-www-form-urlencoded");
var actual_request:string = "grant_type=password" +
"&username=" + request.username + "&password=" + request.password;
return this._http.post(this._loginUserUrl, actual_request, options)
.map((response: Response) => <LoginUserResponse> response.json())
.catch(this.handleError);
}
getUserContext(): Observable<UserContextResponse> {
var options = this.getOptionHeader();
return this._http.get(this._users + "/current/context", options)
.map((response: Response) => <UserContextResponse> response.json())
.do((data) => {
this._refreshUserContext(data);
this._userContext = data;
this.isuserContextReady.next(data);
})
.catch(this.handleError);
}
全面服務:
import { Injectable } from '@angular/core';
import { Http, Response, RequestOptionsArgs, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Subject } from 'rxjs/Subject';
import { LoginUserRequest, LoginUserResponse, UserContextResponse } from "./membership.messages";
import { BaseService } from "../../app/membership/membership.base-service";
import { UserProfileService } from "../../app/userprofile.service";
@Injectable()
export class MembershipService extends BaseService {
private _loginUserUrl:string;
private _users:string;
public _userContext: UserContextResponse;
loggedIn:boolean;
public isuserContextReady: BehaviorSubject<UserContextResponse> = new BehaviorSubject<UserContextResponse>(null);
constructor(private _http: Http,
private _userProfileService:UserProfileService) {
super();
this._loginUserUrl = this.baseurl + '/token';
this._users = this.baseurl + '/api/users';
var auth_token = sessionStorage.getItem('auth_token');
this.loggedIn= (auth_token)?true:false;
}
getUserContext(): Observable<UserContextResponse> {
var options = this.getOptionHeader();
// console.log("at get user context");
return this._http.get(this._users + "/current/context", options)
.map((response: Response) => <UserContextResponse> response.json())
// .do(data => console.log('All: ' + JSON.stringify(data)))
.do((data) => {
this._userContext = data;
this.isuserContextReady.next(data);
})
.catch(this.handleError);
}
login(request: LoginUserRequest): Observable<LoginUserResponse> {
var options:RequestOptionsArgs ={};
options.headers = new Headers();
options.headers.append("content-type", "application/x-www-form-urlencoded");
var actual_request:string = "grant_type=password" +
"&username=" + request.username + "&password=" + request.password;
return this._http.post(this._loginUserUrl, actual_request, options)
.map((response: Response) => <LoginUserResponse> response.json())
.catch(this.handleError);
}
}
基本上,您需要使用@angular/common/http
的新包HttpClient(以及其他包)更改Http模塊。 您當前的代碼如下所示:
import { HttpClient, HttpResponse, httpOptions, HttpHeaders} from '@angular/common/http'; //you need to change all these imports
// your 'login' method may look like this
login(request: LoginUserRequest): Observable < LoginUserResponse > {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/x-www-form-urlencoded'
})
};
const actual_request = new FormData();
formData.append('grant_type', 'password');
formData.append('username', request.username);
formData.append('password', request.password);
return this._http.post(this._loginUserUrl, actual_request, httpOptions)
.subscribe(
(response: Response) => { < LoginUserResponse > response.json(); },
(error: any) => { this.handleError(); }
);
}
遷移到angular 7之前需要考慮的一些基本事項。
從Angular 4開始,angular對Http
折舊,並維持HttpClient
對Http
更改。
import { HttpClientModule } from '@angular/common/http';
用核心模塊中的HttpClientModule
替換HttpModule
。
import { HttpClient, HttpHeaders } from '@angular/common/http';
constructor(private _http: HttpClient) {}
getUserContext(): Observable<UserContextResponse> {
var options = this.getOptionHeader();
// console.log("at get user context");
return this._http.get(this._users + '/current/context', options).pipe(
tap(data => {
this._userContext = data;
this.isuserContextReady.next(data);
}, catchError(err => err))
);
}
map to json
catchError
請從此鏈接https://rxjs.dev/api/operators/catchError查看catch操作符 HttpHeaders
而不是Headers
HttpClient
現在支持打字,所以你不需要Http
Response
。 在this._http.get<ResponseInterface>(url, options)
定義您的響應類型this._http.get<ResponseInterface>(url, options)
HttpClient
沒有RequestOptionsArgs
接口
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.