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

我试图从外部api获取数据，我使用

async

和

wait

。我想等待来自

onClick

函数的用户输入，然后将url传递给异步函数，并从该url获取json格式的数据。 OnClick函数正在工作：

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

HTML

搜寻

在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);
  }

---

在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);
  }

---

下面我根据Angular最佳实践提出了一个可行的解决方案，对代码进行了注释，以帮助您更好地理解它

模板

<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);
  }
}

从“@angular/core”导入{Component，OnInit，ViewChild，ElementRef}；
从“@angular/common/http”导入{HttpClient}；
@组件（{…}）
导出类YourComponent实现OnInit{
data:any；//api响应将存储在这里
baseUrl:string='1〕https://api.url.info/feed/';
//您需要在模块上导入HttpClientModule（在AppModule中可以）
构造函数（私有http:HttpClient）{}
//正确的访问方法之一
//文件：https://angular.io/api/core/ViewChild
@ViewChild（“yourData”，{static:true}）yourTemplateElement:ElementRef；
//使用ngOnInit如果static选项设置为true，则使用ngAfterViewInit，否则使用ngAfterViewInit
异步ngOnInit（）{
this.data=等待this.getData（this.baseUrl）；
}
getData（url:string）：任意{
//使用http客户端服务进行http调用。
//默认情况下，它返回一个可观察的，但由于您想使用
//对于async/await关键字，我们需要将其转换为承诺
返回此.http.get（url.toPromise（）；
}
异步onClick（）{
const URLSEMENT=this.yourTemplateElement.nativeElement.value；
this.data=等待this.getData（this.baseUrl+urlSegment）；
}
}

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

模板

<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);
  }
}

从“@angular/core”导入{Component，OnInit，ViewChild，ElementRef}；
从“@angular/common/http”导入{HttpClient}；
@组件（{…}）
导出类YourComponent实现OnInit{
data:any；//api响应将存储在这里
baseUrl:string='1〕https://api.url.info/feed/';
//您需要在模块上导入HttpClientModule（在AppModule中可以）
构造函数（私有http:HttpClient）{}
//正确的访问方法之一
//文件：https://angular.io/api/core/ViewChild
@ViewChild（“yourData”，{static:true}）yourTemplateElement:ElementRef；
//使用ngOnInit如果static选项设置为true，则使用ngAfterViewInit，否则使用ngAfterViewInit
异步ngOnInit（）{
this.data=等待this.getData（this.baseUrl）；
}
getData（url:string）：任意{
//使用http客户端服务进行http调用。
//默认情况下，它返回一个可观察的，但由于您想使用
//对于async/await关键字，我们需要将其转换为承诺
返回此.http.get（url.toPromise（）；
}
异步onClick（）{
const URLSEMENT=this.yourTemplateElement.nativeElement.value；
this.data=等待this.getData（this.baseUrl+urlSegment）；
}
}

我不熟悉angular，但一般的方法是在事件处理程序中调用抓取函数。该事件处理程序已经是等待用户输入的方式。关于

async/await

特别是：承诺只能解析一次，因此它不能表示可以多次触发的事件处理程序。您好，Santal，我绝对建议您阅读angular文档，因为使用

document

访问DOM元素不是一种方法。Angular就是为了这个，简化你的生活，把它抽象出来。HTTP层也是如此。Angular

HttpClient

允许您执行HTTP请求，而不是自己执行

fetch

。@maxime1992是正确的。如果您与我们共享您的HTML模板，我们可以为您提供一个示例，说明如何以正确的角度完成这两项任务。我编辑了我的帖子，现在有了HTML模板，但仍然没有看到id等于“data”的HTML元素我对angular不太熟悉，但一般的方法是在事件处理程序中调用抓取函数。该事件处理程序已经是等待用户输入的方式。关于

async/await

特别是：承诺只能解析一次，因此它不能表示可以多次触发的事件处理程序。您好，Santal，我绝对建议您阅读angular文档，因为使用

document

访问DOM元素不是一种方法。Angular就是为了这个，简化你的生活，把它抽象出来。HTTP层也是如此。Angular

HttpClient

允许您执行HTTP请求，而不是自己执行

fetch

。@maxime1992是正确的。如果您与我们共享您的HTML模板，我们可以为您提供一个示例，说明如何以正确的角度完成这两项任务。我编辑了我的帖子，现在有了HTML模板，但仍然没有看到id等于“data”的HTML元素这就是您试图访问的内容。您的示例有点混乱，因为您正在将URL传递给

getData

并将其分配给

this.URL

，并且您正在

getData

中访问参数和

this.URL

。我建议把这件事弄清楚一点，让它不那么混乱。你说得对。我已经更新了答案。虽然这可能有效，但我强烈建议您在使用Angular时不要做类似的事情。你是