Typescript async和此作用域

Question

我已经设置了一个简单的服务来从数据库中提取数据，该服务运行良好，但当我试图通过aysnc函数将数据从服务中提取到组件中时，我似乎无法通过使用"这个"；。

有什么想法吗？我一定是做错了什么，因为我是新开发的。

这是运行良好的服务代码；

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class VenueserviceService {
constructor(private http: HttpClient) { }
httpGetFeatures() {
console.log("inFeatures")
this.http.post("http://******************",
{
"command": "get_feature",
"classes":"F,G"
})
.subscribe(
(val) => {
console.log("inSubscribe")
console.log(val)
return(val)
//this.parseFeatures(val)
},
response => {
console.log("POST call in error", response);
},
() => {
});
}

parseFeatures (val: any) {
console.log("in parse Features")
console.log(val)
}

}

这里是分量TS；这个"；抛出一个错误，因为它是未定义的，因为我相信它的范围没有通过。它是底部的最后一个异步函数。

import { Component, OnInit } from '@angular/core';
import * as data from "./testfile.json";
import * as catdata from "../categories/cattestfile.json";
import {VenueserviceService} from "../../services/venueservice.service"

@Component({
selector: 'app-homepage',
templateUrl: './homepage.component.html',
styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {
constructor(private venueService: VenueserviceService) { }
panelOpenState = false;
title = 'Cotswolds Destinations';
venues: any = (data as any).default;
categories: any = (catdata as any).default;
formatLabel(value: number) {
if (value >= 1000) {
return Math.round(value / 1000) + 'm';
}
return value;
}
value = 'Clear me!';
ngOnInit(): void {
console.log("Homepage Start");
console.log(this.categories);
console.log(this.venues);
console.log(data);
console.log(this.venues.name);
for(var i=0; i < this.venues.length; i++){
console.log(this.venues[i]);
}
console.log("Homepage End");
let categories = this.venueService.httpGetFeatures()
console.log(categories)
}
}

const getData =  async () => {
const data  = await this.venueService.httpGetFeatures()
console.log(data)
}

Answer 1

我建议你做这个

服务文件

httpGetFeatures() {
console.log("inFeatures")
return this.http.post("http://cotswoldsdestinations.co.uk:8443",
{
"command": "get_feature",
"classes":"F,G"
})
}

组件文件

fetchedData:any;
const getData =  async () => {
this.venueService.httpGetFeatures()
.subscribe( data => { this.fetchedData = data });
}

Answer 2

1st，您在VenueserviceService.httpGetFeatures中没有返回任何内容，它的返回类型为void。

第二，您期望在getData lambda函数中有一个promise，因为您使用的是asyc-await语法。要么这样做：

httpGetFeatures() {
return this.http.post("http://cotswoldsdestinations.co.uk:8443",
{
"command": "get_feature",
"classes":"F,G"
}).toPromise();
}

或者只订阅返回的可观察结果而不等待：

httpGetFeatures() {
return this.http.post("http://cotswoldsdestinations.co.uk:8443",
{
"command": "get_feature",
"classes":"F,G"
});
}
const getData = () => {
this.venueService.httpGetFeatures().subscribe(data =>
console.log(data);
);
}

如果您在某个组件中定义了getData，并且venueService: VenueserviceService在其构造函数中通过DI传递，那么这一切都是可以的。

为了使其正常工作，请将getData定义为主页组件类的成员，例如：

export component HomePageComponent {
constructor(private venueService: VenueserviceService) {}
getData() {
this.venueService.httpGetFeatures().subscribe(data =>
console.log(data);
);
}
}