Блог

Обновление служб для функционирования в Angular 7. У меня есть две функции, которые я рассматриваю для начала — функция входа в систему и функция получения информации о пользователе.

Я использовал импорт модулей { Http, Response, RequestOptionsArgs, Headers } из ‘@angular / http’;

Я не могу найти руководство по миграции.

     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"   
    "amp;username="   request.username   "amp;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);
 }
  

Полный сервис.ts:

     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"   
        "amp;username="   request.username   "amp;password="   request.password;
        return this._http.post(this._loginUserUrl, actual_request, options)
            .map((response: Response) => <LoginUserResponse> response.json())
            .catch(this.handleError);
    }

}
  

Некоторые основные моменты, которые следует учитывать перед переходом на angular 7.

Начиная с Angular 4, angular обесценивается Http и поддерживается HttpClient с последним изменением на Http .

 import { HttpClientModule } from '@angular/common/http';
  

замените HttpModule на HttpClientModule в вашем основном модуле.

 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))
    );
  }
  

• Также вам необходимо перейти на версию rxjs до 6, чтобы использовать конвейерные операторы
• ответом от HttpClient по умолчанию является JSON, поэтому вам не придется map to json повторять
• catchError Пожалуйста, проверьте оператор catch по этой ссылкеhttps://rxjs.dev/api/operators/catchError
• используйте HttpHeaders вместо Headers
• HttpClient теперь поддерживаются типизации, поэтому вам не требуется Response ввод Http . Определите свой тип ответа в this._http.get<ResponseInterface>(url, options)
• нет интерфейса для RequestOptionsArgs в HttpClient

В принципе, вам нужно изменить свой Http-модуль с помощью нового пакета HttpClient (и других) от @angular/common/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(); }
    );
}