Angular6 RxJsのsubscribeのデータをreturnで返したい

以下のようなサービスを作成してデータを取得しているのですが
このサービスをcomponentで呼んでthis.testDataを返したいのですが
普通に呼ぶとundifinedが返ってきてしまいます
非同期なのが影響していると思うのですがいいやり方はないでしょうか

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { GetApiReturnService } from './get-api-return.service';
import * as xml2js from 'xml2js';

@Injectable({
  providedIn: 'root'
})
export class TestService {

  url: string;

  testData;

  constructor(private http: HttpClient, private getApiReturnService: GetApiReturnService) { }

  searchTest(){
    this.url = 'https://test.jp/api?type=1';

    let testData;
    this.getApiReturnService.search(this.url).subscribe(response => {
      xml2js.parseString(response, function (err, result) {
        testData = result;
      });
      this.testData = testData;
    });

    
    return this.testData;

  }
}

行動規範の内容に同意します

回答1件

ベストアンサー

おっしゃる通り、 getApiReturnService が非同期処理ですので
testData が undefined の状態で return してしまっています。

Subject を使い testData が準備できしだい流すようにしてやります。

typescript
1import { HttpClient } from '@angular/common/http';
2import { Injectable } from '@angular/core';
3import { Observable, Subject } from 'rxjs';
4import { GetApiReturnService } from './get-api-return.service';
5import * as xml2js from 'xml2js';
6
7@Injectable({
8  providedIn: 'root'
9})
10export class TestService {
11
12  url: string;
13
14  // TYPE には testData の型を指定してください。
15  testData: Subject<TYPE> = new Subject();
16
17  constructor(private http: HttpClient, private getApiReturnService: GetApiReturnService) { }
18
19  searchTest(){
20    this.url = 'https://test.jp/api?type=1';
21
22    let testData;
23    this.getApiReturnService.search(this.url).subscribe(response => {
24      xml2js.parseString(response, function (err, result) {
25        testData = result;
26        this.testData.next(testData);
27      });
28    });
29
30    return this.testData;
31  }
32}

値を受け取る側では次のようにします。

typescript
1// (抜粋)
2
3constructor(private testService: TestService){
4    this.testService.searchTest().subscribe(testData => {
5       // testData を使った処理……
6    });
7}