如何在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。