Как вернуть данные из сервиса, не являющегося HttpClient, в компонент - PullRequest
Новая
       4

Как вернуть данные из сервиса, не являющегося HttpClient, в компонент

0 голосов
/ 10 ноября 2018

У меня есть эта услуга, и мне нужно вернуть продукты компонентам, которые я здесь не использую, HttpClient или Observable, поскольку они мне не нужны 

export class StoreDataProvider {

  private _wooData: any;

  constructor() {
    this._wooData = Woo({
      url: 'http://example.com/',
      consumerKey: 'key here',
      consumerSecret: 'key here',
      wpAPI: true,
      version: 'wc/v3'
    });
  }

  getAllProducts() {
    return this._wooData.get('products', (err, data, res) => {
      return res 
    });
  }

}

Приведенный выше код возвращает заголовки, а не продукты, но если я возвращаю продукты в самой службе, а не возвращаю, я получаю продукты! код будет таким: 

export class StoreDataProvider {

  private _wooData: any;

  constructor() {
    this._wooData = Woo({
      url: 'http://example.com/',
      consumerKey: 'key here',
      consumerSecret: 'key here',
      wpAPI: true,
      version: 'wc/v3'
    });
  }

  getAllProducts() {
    this._wooData.get('products', (err, data, res) => {
      console.log(res); 
    });
  }

}

Код в компоненте просто console.log( this._wooService.getAllProducts() ), если я консоль журнала в службе

Так чего мне здесь не хватает?

1 Ответ

0 голосов
/ 10 ноября 2018

Есть много Аппарошей решения этого:

1. Использование BehaviorSubject 

import { BehaviorSubject } from 'rxjs';

export class StoreDataProvider {

  private _wooData: any;
  private wooData: BehaviorSubject<any> = new BehaviorSubject<any>(null);
  public wooData$ = this.wooData.asObservable();

  constructor() {
    this._wooData = Woo({...});
  }

  getAllProducts() {
    this._wooData.get('products', (err, data, res) => {
      this.wooData.next(res);
    });
  }

}

И затем вы можете использовать его в своем Компоненте следующим образом: 

constructor(private _wooService: WooService) {}

ngOnInit() {
  this._wooService.wooData$.subscribe(res => console.log(res));
  this._wooService.getAllProducts();
}

Обратите внимание, что изначально вы получите ноль, так как мы инициализировалиBehaviorSubject с null.Но как только вы позвоните getAllProducts и получите данные, вы получите свои данные.

2. Использование Promise. 

export class StoreDataProvider {

  private _wooData: any;

  constructor() {
    this._wooData = Woo({...});
  }

  getAllProducts(cb) {
    return new Promise((resolve, reject) => {
      this._wooData.get('products', (err, data, res) => {
        if(err) reject(err);
        else resolve(res);
      });
    });
  }

}

И затем вы можете использовать его в своем Компоненте следующим образом: 

constructor(private _wooService: WooService) {}

ngOnInit() {
  this._wooService.getAllProducts()
    .then((res) => console.log(res))
}

3. Использование обратного вызова 

export class StoreDataProvider {

  private _wooData: any;

  constructor() {
    this._wooData = Woo({...});
  }

  getAllProducts(cb) {
    this._wooData.get('products', (err, data, res) => {
      cb(res);
    });
  }

}

А затем вы можете использовать его в своем компоненте следующим образом: 

constructor(private _wooService: WooService) {}

ngOnInit() {
  this._wooService.getAllProducts((res) => console.log(res));
}
...