#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 } ? Но каким-то образом я получаю метаданные (см. Изображение в исходном сообщении). Думаю, я напутал с функциями.