如何使用异步函数等待来自 onClick 的用户输入？

Question

我正在尝试从外部 api 获取数据，我使用 async 和 await。我想等待来自onClick 函数的用户输入，然后将 url 传递给异步函数并以 json 格式从该 url 获取数据。 OnClick 功能正在运行：

onClick(){
   this.data=(<HTMLInputElement>document.getElementById('data')).value;
    
   return this.url='https://api.url.info/feed/'+this.data
}

当我使用console.log(data2) undefined 时出现下一个错误：加载资源失败：服务器响应状态为 404（未找到）

async getData(){
    var data2=this.url;
    const response=await fetch(this.url);
    this.data=await response.json();
}

ngOnInit(){
    this.getData();
}

HTML

<input type="text" id="data"  value=""/>
<button type="button" (click)="onClick()" id="btn">Search</button>

Answer 1

在你的onClick方法中，调用getData()方法，不要在ngOnInit中调用this.getData()。您的代码应如下所示：

onClick(){
    this.data=(<HTMLInputElement>document.getElementById('data')).value;
    const url='https://api.url.info/feed/'+this.data;
    this.getData(url);
  }

async getData(url){
    const response=await fetch(url);
     this.data=await response.json();
  }

Answer 2

下面我按照 Angular 最佳实践制作了一个可行的解决方案，对代码进行了注释以帮助您更好地理解它。

Demo

模板

<input #yourData id="data" type="text" id="input"  value=""/>
<button type="button" (click)="onClick()" id="btn">Search</button>

组件

import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Component({ ... })
export class YourComponent implements OnInit {
  data: any; // The api response is going to be stored here
  baseUrl: string = 'https://api.url.info/feed/';

  // You need to import the HttpClientModule on your module (in the AppModule is fine)
  constructor(private http: HttpClient) { }

  // One of the proper ways to access
  // Documentation: https://angular.io/api/core/ViewChild
  @ViewChild("yourData", { static: true }) yourTemplateElement: ElementRef<HTMLInputElement>;

  // Use ngOnInit if the static option is set to true, use ngAfterViewInit otherwise
  async ngOnInit() {
    this.data = await this.getData(this.baseUrl);
  }

  getData(url: string): any {
    // Use the http client service to make http calls.
    // By default it returns an observable but since you want to use
    // the async/await keywords, we need to convert it into a promise
    return this.http.get(url).toPromise();
  }

  async onClick() {
    const urlSegment = this.yourTemplateElement.nativeElement.value;
    this.data = await this.getData(this.baseUrl + urlSegment);
  }
}