Миграция Ioni c 3 в Ioni c 5 API - PullRequest
Новая
       135

Миграция Ioni c 3 в Ioni c 5 API

0 голосов
/ 06 августа 2020

Здравствуйте, у меня есть проект Ioni c 3, и я хочу перейти на Ioni c 5. Я знаю о компонентах, но у меня проблема с Http, который больше не поддерживается.

Раньше я вызывал функции .ts для вызова данных из API, как это 

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { AppData } from '../../providers/app-data/app-data';

 @Injectable()
 export class UserData {

options: any;
api_signature: string = '';

constructor(
    public http: Http,
    public device: Device,
    public events: Events
) {

    let headers = new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
    });
    this.options = new RequestOptions({
        headers: headers
    });
}

и функционировал как 

allUsers(offset: number) {
    let url = this.appData.getApiUrl() + 'allUsers';
        let data = this.jsonToURLEncoded({
            offset:offset
        });
        return this.http.post(url, data, this.options);
}

Теперь я вызываю http как HttpClient вот так. Но у меня проблемы с RequestOptions, горит красный свет, ана говорит, что не могу найти модуль, который, как я знаю, больше не поддерживается 

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { AppData } from '../app-data/app-data';
import { HttpClient } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class UserData {
  options: any;

 constructor(
public storage: Storage,
public appData: AppData,
public http: HttpClient,
) { 
let headers = new Headers({
  'Content-Type': 'application/x-www-form-urlencoded'
});
 this.options = new RequestOptions({
  headers: headers
});

}

и такая функция 

 allUsers(offset: number) {
    const url = this.appData.getApiUrl() + 'allUsers';
    const data = this.jsonToURLEncoded({
      offset: offset
    });
    return this.http.post(url, data, this.options);
  }

У меня также есть проблема с rx js и map. Вот как я вызываю функции в .ts для получения данных из api. 

allUsersSet() {
this.userData.allUsers(this.offset)
  .map(res => res.json())
  .subscribe(data => {
    if (data.success) {
      const temp = data.usersFeed;
      this.allUsers = temp;
    }

  });
 }

.map перерисовывается и говорит, что не существует на Observable, я поставил 

import { map } from 'rxjs/operators';

, но .map по-прежнему остается error

Я сделал это 

allUsersSet() {
this.userData.allUsers(this.offset)
map((data: any) => {
    if (data.success) {
      const temp = data.usersFeed;
      this.allUsers = temp;
    }

  });
 }

Я не получаю сообщение об ошибке, но вызов API не отображается на вкладке Inspect / Network / XHR

Любая помощь?

Ответы [ 2 ]

1 голос
/ 06 августа 2020

Попробуйте использовать HttpHeaders вместо RequestOptions 

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

this.options = new HttpHeaders({
   'Content-Type': 'application/x-www-form-urlencoded'
});

А затем используйте его следующим образом: 

return this.http.post(url, data, this.options);

Вы можете проверить документацию по более новой версии API здесь: https://angular.io/guide/http

Проблема с вашей картой, вам нужно использовать pipe 

this.userData.allUsers(this.offset).pipe(
   map((data: any) => {
      if (data.success) {
         const temp = data.usersFeed;
         this.allUsers = temp;
      }
   })
);

Наблюдаемые документы здесь: https://rxjs-dev.firebaseapp.com/guide/operators

API не будет вызываться, если вы не вызовете .subscribe () 

this.userData.allUsers(this.offset).pipe(map()).subscribe()
0 голосов
/ 06 августа 2020

Вы тоже можете использовать это. 

import { HttpClient, HttpParams } from '@angular/common/http';

allUsers(offset: number) {
const url = this.appData.getApiUrl() + 'allUsers';

const requestOptions = {
  params: new HttpParams()
};
  const data = this.jsonToURLEncoded({
    api_signature: this.api_signature,
    offset: offset
  });
  return this.http.post(url, data, requestOptions );
}
...