Выборка данных из BlobStorage через Service.ts и вызов функции NgOnit

#angular #typescript #web-services #callback

#angular #typescript #веб-сервисы #обратный вызов

Вопрос:

В модуле service.ts я извлекаю данные из Azure Blobstorage и хочу прочитать содержимое.

service.ts

 import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { JsonData } from '../models/jsondata';



import {
  BlobServiceClient,
  BlobDownloadResponseModel
} from "@azure/storage-blob";




@Injectable({
  providedIn: 'root'
})

export class JsonDataService {
  private account = environment.ACCOUNT_NAME;

  private sas = environment.SAS;
  private blobServiceClient

  constructor() { this.blobServiceClient = new BlobServiceClient(`https://${this.account}.blob.core.windows.net${this.sas}`) }


  getData(): Promise<JsonData[]> {

    return new Promise(resolve => {


      const containerName = "output2";
      const containerClient = this.blobServiceClient.getContainerClient(containerName);

      //list blobs
      let i = 1;

      async function main() {
        i = 1;
        for await (const blob of containerClient.listBlobsFlat()) {

          // console.log(`Blob ${i  }: ${blob.name}`);
          const blockBlobClient = containerClient.getBlockBlobClient(blob.name);
          console.log(blockBlobClient)
          const downloadBlockBlobResponse = await blockBlobClient.download(0);
          const download = await blobToString(await downloadBlockBlobResponse.blobBody)
          console.log(downloadBlockBlobResponse)
          //console.log("Downloaded blob content",download);
          console.log(download)
          return download

        }

      }

      //BROWSER ONLY A HELPER METHOD USED TO CONVERT A BROWSER BLOB INTO STRING
      async function blobToString(blob: Blob): Promise<string> {
        const fileReader = new FileReader();
        return new Promise((resolve, reject) => {
          fileReader.onloadend = (ev: any) => {
            JSON.parse(ev.target!.result)
            resolve(ev.target!.result);
            
          };
          fileReader.onerror = reject;


          fileReader.readAsText(blob);


        });
      }

      main().catch((err) => {
        console.error("Error running sample:", err.message);
      })

    })

  }

}
  

Я тестирую эту функцию с помощью console.log, она возвращает правильные данные.

Теперь я хочу получить доступ к этой функции через компонент test.component.ts, и я использую ngOnit для вызова этой функции, но почему-то она возвращает только метаданные, а не возвращаемые значения, вызывая функцию getData().

test.component.ts

 import { Component, OnInit, Input } from '@angular/core';
import { JsonDataService } from 'src/app/services/json-data.service';
import { JsonData } from 'src/app/models/jsondata';



@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  providers: [JsonDataService]
})



export class TestComponent implements OnInit {
  @Input() title: string;
  jsondatas: Array<JsonData> = [];
  jsondata: JsonData;
  name: String;
  timestamp: number;
  value: number;

  //constructor() { }

  

  constructor(private jsonService: JsonDataService) {
  
  }

  ngOnInit(): void {
    this.jsonService.getData()
      .then(results => this.jsondatas = results);

    console.log(this.jsonService)

  }

}
  

Это результат NgOnit:
console.log(this.jsonService

Но то, что я ожидал, — это определенные jsondata, подобные name, timestamp, value

Ответ №1:

Ваше обещание никогда не выполняется, его нужно вызвать в конце resolve (myResultJsonDatas), чтобы оно сработало

пример ниже :

   getData(): Promise<string> {
    return new Promise(resolve => {
      // Some code
      resolve('myResult');
    })
  }
  

Комментарии:

1. Спасибо, что такое ‘myResultJsonDatas’? Значения, которые мне нужно вернуть обратно, находятся в асинхронной функции main() {… const download = await blobToString(ожидает downloadBlockBlobResponse.blobBody) }. Но как передать это значение в аргументы resolve? извините за эти вопросы, я новичок в Angular

2. Я не знаком с асинхронным синтаксисом, но вам нужно было бы сделать что-то вроде этого resultData = await main().catchError(err => { console.error(‘message’); return null; }); разрешить(resultData);

3. спасибо, но нужно ли мне также вызывать resultData для функции ngOnInit?, потому что как модуль test.component.ts будет получать информацию о resultData?

4. resultData — это локальная переменная promise, функция resolve «передаст» ее в переменную результатов в компоненте здесь : «this.jsonService.getData().then(результаты»

5. хорошо, спасибо за объяснение. Итак, console.log(this.jsonService) на самом деле должен возвращать строку json, которая выглядит следующим образом {«name»: «Michael»; «timestamp»: «1598207249»; «value»: 23 } ? Но каким-то образом я получаю метаданные (см. Изображение в исходном сообщении). Думаю, я напутал с функциями.