如何在Angular 8或9同步HTTP请求（发出请求等待）

Question

一共有三个按钮：

单击第一个Request HTTP Data As Promise按钮获得其 HTTP 响应作为Promise 。

第二个Request HTTP Data As Observable按钮将其响应作为Observable 。

这两个按钮都使用异步响应机制获得响应。

现在，我想要第三个Request HTTP Data and Wait按钮获得同步响应。 我希望它等待 http 服务返回 HTTP 响应。

怎么做到的？ 这是 Stackblitz 项目的链接（请使用HttpService脚本中定义的占位符 function getDataSynchronous来实现此功能）：

https://stackblitz.com/edit/angular-ivy-ukgwct?file=src%2Fapp%2Fhttp.service.ts

export class HttpService {
  jsonFile = '../assets/products.json';

  constructor(private http: HttpClient) {}

  getDataAsPromise(): Promise<any> {
    return this.http.get(this.jsonFile)
      .toPromise()
  }

  getDataAsObservable(): Observable<any> {
    return this.http.get(this.jsonFile)
  }

  getDataSynchronous(): any {
    return []
  }

Answer 1

演示异步 function 是一个 function，它通过事件循环异步操作，使用隐式 Promise 返回其结果。 但是使用异步函数的代码的语法和结构更像是使用标准同步函数。 await 运算符用于等待 Promise。它只能在异步 function 内部使用。

getDataSynchronous() {
    return  this.http.get(this.jsonFile).toPromise()
}

在组件中

async requestDataAndWait() {
    let httpData = await this.http.getDataSynchronous();  
    this.addMessages(httpData)  
}

Answer 2

尽管 Angular 不是惯用的，但您可以使用同步 XHR 请求在技术上实现这一点：

getDataSynchronous() {
    var request = new XMLHttpRequest();
    request.open('POST', `${environment.userApiUrl}/logout`, false);  // `false` 
    makes the request synchronous
    request.send({});

    if (request.status === 200) {
        return request.response;
    } else {
        throw new Error('request failed');
    }
}

请注意，它不能使用 Angular HTTP 客户端来完成，并且除非绝对必要，否则您不应该使用此解决方案，因为在大多数现代浏览器中，主线程上的同步XmlHttpRequest已被弃用。

Answer 3

这对我有用。

在您的app.component.ts文件中写入此代码：

  ngOnInit(): void
  {
    window.addEventListener('beforeunload', (e) =>
    {
      this.logoutAndWait();
    })
  }

  async logoutAndWait()
  {
    const httpData = await this.userService.logoutSynchronous();
  }

并像下面这样创建同步注销 function：

  logoutSynchronous()
  {
    return this.http.post<string>(`${environment.userApiUrl}/logout`, {}, { withCredentials: true }).toPromise()
  }

Answer 4

您可以试用一个名为ts-sync-request的 typescript 库。

GitHub: https://github.com/VeritasSoftware/ts-sync-request

NPM: https://www.npmjs.com/package/ts-sync-request

您可以使用此库从 typescript 进行同步 http 调用。

例如：

得到

import { SyncRequestClient } from 'ts-sync-request/dist'

let id = 1;
let url = "http://localhost:59039/api/Movies/" + id;
 
let response = new SyncRequestClient()
                             .addHeader("Authorization", "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1NDc2OTg")
                        .get<Movie>(url);

Answer 5

您可以通过使用async和await来实现

async getDataSynchronous() {
  let data = await this.http.get(this.jsonFile).toPromise();
  return data;
}

Answer 6

你不能，不能用 Javascript。